微信小程序--圖片上傳刪除

小程序前台頁面：

//圖片上傳 --添加圖片
    afterRead(event) {
      var that = this;
      const { file } = event.detail;
      //console.log(file.path);
      // 當設置 mutiple 為 true 時, file 為數組格式，否則為對象格式
      wx.uploadFile({
        url: 'http://www.xcxshoplars.com/api/upload_image', // 僅為示例，非真實的接口地址
        filePath: file.path,
        name: 'file',
        formData: { user: 'test' },
        success(res) {
          console.log(res.data);
         
          var datas = JSON.parse(res.data);
          var image = "http://www.xcxshoplars.com"+datas.data; //后台傳過來的地址地址
          var fileLists = [];
          fileLists = that.data.fileList
          let imagesInfo = { url: image}
          fileLists.push(imagesInfo)
          that.setData({
           fileList:fileLists
         });

        }
      });
    },

    //圖片上傳-點擊刪除
  deleteImages(event){
    var image_index = event.detail.index
    var fileList_new = this.data.fileList;
    fileList_new.splice(image_index,1);
    this.setData({
      fileList: fileList_new
    })
   // console.log(event.detail.index);
  },

  data: {
  
    fileList: [
      // { url: 'https://img.yzcdn.cn/vant/leaf.jpg', name: '圖片1' },
      // // Uploader 根據文件后綴來判斷是否為圖片文件
      // // 如果圖片 URL 中不包含類型信息，可以添加 isImage 標記來聲明
      // {
      //   url: 'http://iph.href.lu/60x60?text=default',
      //   name: '圖片2',
      //   isImage: true
      // }
    ]
  },

小程序后台頁面（post接收）：

class FeedbackController extends Controller
{
    public function image(Request $request)
    {
        $file=$request->file('file');

        //值如：uploads/images/avatars/201709/21/
        $folder_name = "/uploads/images/avatars/" . date("Ym/d", time());
        $upload_path = public_path() . '/' . $folder_name;
        // 獲取文件的后綴名，因圖片從剪貼板里黏貼時后綴名為空，所以此處確保后綴一直存在
        $extension  =  strtolower($file->getClientOriginalExtension())  ?:  'png';
// 拼接文件名，加前綴是為了增加辨析度，前綴可以是相關數據模型的 ID
// 值如：1_1493521050_7BVc9v9ujP.png
        $filename =  time() . '_' . Str::random(10) . '.' . $extension;
        // 將圖片移動到我們的目標存儲路徑中
        $file->move($upload_path, $filename);

        $data = [
            'img_src'=>$folder_name.'/'.$filename, //圖片地址
            'create_time'=>date('Y-m-d H:i:s'),
        ];
        DB::table('feedback')->insert($data);
        
        return response()->json(['status'=>'400','msg'=>'失敗','data'=>$data['img_src']]);


    }


}

 

 

 

 

 

 

 

 

 

 

 

 

上傳七牛空間:

//七牛雲配置文件,在七牛雲控制台個人中心可以查看,這些配置可以寫在 .env里面
    const  Ak ='你自己的AK';
    const SK='你自己的sk';
    const DOMAIN='圖片的專屬域名';
    const BUCKEY='你增加的那個存儲空間';

 

 

//圖片上傳七牛空間
    public function image_qiniu(Request $request){
        $file=$request->file('file');
        $auth = new Auth(self::Ak,self::SK);
        //生成上傳圖片的token
        $extension  =  strtolower($file->getClientOriginalExtension())  ?:  'png';
        $token = $auth->uploadToken(self::BUCKEY);
        $key = time().rand(0,9999).".".$extension;
        $uploadMgr = new UploadManager();
        list($ret,$err) = $uploadMgr->putFile($token,$key,$file);
        if($ret){
            //這里返回的是一個bucket的域名,在前面添加http://后就可以正常看到圖片
            $data = self::DOMAIN.'/'.$key;
            return response()->json(['status'=>'400','msg'=>'失敗','data'=>$data]);
        }else{
            return null;
        }