uni H5上传图片 | 文件

用到uni框架搭建H5.然后涉及到了文件上传，特地来记录下

首先是选择上传文件还是图片

图片：

uni.chooseFile({
        // 其他配置项
    success(res) {
        console.log(res)
    }
})

文件：

uni.chooseImage({
        // 其他配置项
    success(res) {
        console.log(res)
    }
})

然后在成功的回调里调用 uni.uploadFile

 例如：

uni.chooseFile({
    success(res) {
        uni.uploadFile({
            rl: 'http://xxxxxx/upload',
            filePath: res.tempFilePaths[0],
            name: 'files',
            success: (res) => {
                                
            }
        })
    }
})

 刚开始纠结的是用uni的uploadFile还是自己写接口用接口，当时有个接口文档

 

 

 所以有点迷糊。自己写接口不好封装formData，然后就用的uni的

刚开始请求一直报跨域，然后找到manifest.json文件，右侧最下边源码视图，然后找到h5，

配置代理：

"h5" : {
        "router" : {
            "mode" : "hash",
            "base" : ""
        },
        "devServer" : {
            "https" : false,
            "port" : 8080,
            "proxy" :{
                "" : {
                    // "target" : "https://www.example.com", //请求的目标域名
                    "target" : "http://接口地址:端口/", //请求的目标域名
                    "changeOrigin": true,
                    "secure": true
                }
            }
        },
        "optimization" : {
            "treeShaking" : {
                "enable" : true
            }
        }
    }

然后去请求页面

// 添加附件
addFile(type) {
    uni.chooseFile({
          count: 1,
          success(res) {
          console.log(res,'res')
            if (res.tempFiles[0].size > 30 * 1024 * 1024) {
                     return this.showMessage("附件大小不能超过30M!");
            }
            console.log(res)            
            uni.uploadFile({
                 url: '/adminFile/upload',
                 name: "file",
                 filePath: res.tempFilePaths[0], // 上传选择拿到的 附件资源临时地址
                 header: { 'Admin-Token': uni.getStorageSync('Token')},
                 formData: {
                 　　type,
                 　　batchId: ''
                 },
                 success: function(res) {
                       console.log('success')
                 },
                  fail: function(err) {
                       console.log(err)
                  }
             })
      }
   })
},

因为formData里本来就含有file文件，所以只写接口参数中的其他两个就可以了，然后发送请求

 

 file文件带上了，这样就可以了