H5图片上传

图片选取:
参考: UNIAPP官网API

uni.chooseImage({
    count: 6,  // 设置最多选取的图片张数, 默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album','camera'], //从相册选择或使用相机
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});

success 返回参数说明:

WeChat621d57058e37936ab0fcb536a992de4f.jpg

File 对象结构如下:

其实我们需要的就是 tempFilePaths 中的blob二进制文件流;

单张图片上传:

 uni.chooseImage({
     count: 1,
     sizeType: ['original', 'compressed'],
     success: res => {
         uni.uploadFile({
             url: '后端接口地址',
             filePath: res.tempFilePaths[0], // 就是获取图片的 Blob 二进制文件流
             header: {
                'Authorization': 'Bearer ' + token,
             },
             formData: {
                 id: 123 // 后端接收的其他参数
             },
             name: 'file', // 后端接收的文件名
             complete: (res) => {
                 console.log('res', res)
             }
         })
     }
 })

注意: H5 上传图片不需要设置;
只有在app中提交formData格式的数据, 可以通过设置请求头,来将参数转成formData格式,在真机中调试才不会报错
在 app中提交formData格式的数据

多图片一起上传:

参考官网文件上传

files 参数是一个 file 对象的数组，file 对象的结构如下：

Tip:

• 多文件时, name要必填,且不能相同;否则可能导致服务端读取文件时只能读取到一个文件。

• file 指H5平台的,例如: <input type='file' /> 依赖于浏览器实现. 非必填;

• uri 对应着本地的Blob地址, 必填

看清楚是 uri 不是 url !!!
看清楚是 uri 不是 url !!!
看清楚是 uri 不是 url !!!

    // 多张图片一起上传操作
    let filearr = []
    this.imglist1.map((item,index) =>{
         let obj = {
              name:'FileName'+index,
              uri:item,// 必填  Blob 二进制文件流
           // file: file对象, 不必填
              }
         filearr.push(obj)
       })
    console.log('上传图片参数',filearr)
        // 控件提示
    uni.showLoading({
        title: '上传中...'
    })
    // 开始上传         
    uni.uploadFile({
        url: '后端接口地址',
        files:filearr, // 多个图片一起上传
        // filePath:this.imglist1[i],
        // name: 'FileName',
        formData: {
            "Chk_id": '123321',
        },
        header:{
            Authorization:"BasicAuth"+" "+ token
        },
        success: (uploadFileRes) =>{
            console.log('res', res)
         },
         fail:(err) => { 

         },
       })