Uniapp chooseImage 选择图片 & 自定义上传

背景:

uniApp 开发过程中, 需要上传图片到自己的后端服务

按照官方文档上的写法, 取 tempFilePaths 获取到的是一个 blob:xxx 的文件流, 我们的后端服务不支持这样传参, 报错;

uni.chooseImage(OBJECT) | uni-app官网

步骤:

注意点:

• uni.uploadFile 的 file 参数为自己后端服务定义的参数名

• uni.uploadFile 的 filePath 为文件的实际路径

  methods: {
  chooseImg() {
  uni.chooseImage({
  success: function (res) {
  console.log(res.tempFiles[0]);
  uni.uploadFile({
  url: 'http://xxxxx/api/dp/file/uploads',
  header: {
  Authorization: 'eyJhbGb1xgiUrTPqXx5nkJg7hdw',
  "Content-Type": "application/x-www-form-urlencoded"
  },
  name: 'files',
  filePath: res.tempFiles[0].path,
  formData: {
  dirId: 145605211059456,
  appId: 1,
  // files: res.tempFiles[0],
  },
  success: (uploadFileRes) => {
  console.log(uploadFileRes.data);
  },

    					});
    				}
    			})
    		},
    	}
  

最终效果: