前端图片上传逻辑整理

 

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

1、上传前校验，最大10M，image格式

  beforeRead(event) {

    const { file, callback } = event.detail;

    let sizeFlag = file.every((item) => item.size < 1024 * 1024 * 10);

    if (!sizeFlag) {

      app.$toast("请选择10M以下的图片");

      callback(false);

    } else {

      callback(true);

    }

  },

上传完毕后获取到对应的临时地址

2、文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，

  afterRead(event) {

    const { file } = event.detail;

    file.map((item) => (item.status = "done"));

  },

获取到临时地址之后，调用后端接口获取到上传到服务器的一些参数

wx.uploadFile（）

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

url：开发者服务器地址（后端接口中获取）

filePath：要上传文件资源的路径 (本地路径)（就是获取到的临时地址）

name: 'file',//必须填file

formData：HTTP 请求中其他额外的 form data

 let uploadSuccessUrl =this.fileUploadParams.dir + "/" + App.uuid();  //保证唯一性

     formData: {

            'key': uploadSuccessUrl,  

            'policy': this.fileUploadParams.policy,      （后端返回）     

            'OSSAccessKeyId': this.fileUploadParams.accessid, （后端返回）  

            'signature': this.fileUploadParams.signature,    （后端返回）  

        },

success成功之后：

const url = _this.fileUploadParams.host + "/" + uploadSuccessUrl;

ossList.push(url)