uniapp上传图片别踩坑

==在线摸鱼==

已于 2023-08-11 16:43:37 修改

阅读量6.1k

点赞数 5

分类专栏： uniapp 文章标签：小程序 vue uni-app

于 2020-11-04 15:31:28 首次发布

本文链接：https://blog.csdn.net/xiaochengzi0207/article/details/109491514

版权

uniapp 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

uniapp上传图片踩坑
使用uni.chooseImage 选择图片时，手机上获取不到图库，打开应用管理权限设置=》文件存储权限打开

uni.uploadFile上传图片，

uploadBC() {
      const token = uni.getStorageSync('token');
      uni.chooseImage({
        count: 1, // 最多上传几张图片，默认9张
        sizeType: ['compressed'], // 所选图片尺寸，compressed 压缩图
        sourceType: ['album'], // 选择图片的来源,相册中的还是相机拍摄, 'camera'
        success: (res) => {
          const imgFiles = res.tempFilePaths[0]; // 图片的本地文件路径列表
          // let path = res.tempFiles[0].path;
          uni.uploadFile({
            url: 'https://a.jsh.com/new/api/upload?Code=87&step=1',
            // formData: selfOptions.data,
            header: {
              'content-type': 'multipart/form-data',
              Authorization: `Bearer ${token}`,
            },
            fileType: 'image',
            filePath: imgFiles,
            name: 'file',
            success: (uploadFileRes) => {
              console.log(JSON.parse(uploadFileRes.data));
            }
          });
        }
      });
    },

如果是在h5中，header里去掉’content-type’: ‘multipart/form-data’,
若是在小程序真机中图片上传失败，header里加上’content-type’: ‘multipart/form-data’,就可以了