[Uniapp开发日记]上传图片( 最新API版本使用、完整代码、CV可用 )( 开发者服务器非云开发 )

上传

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器

客户端发起一个 POST 请求

实际使用

上传图片、上传文件

参数说明

files 参数说明

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

success 返回参数说明

注意 ( 更多参考官方文档 )

• App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。

示例代码

uni.chooseImage({
	success: (chooseImageRes) => {
	  // 返回临时路径列表 
		const tempFilePaths = chooseImageRes.tempFilePaths;
		// 上传文件到服务器
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: tempFilePaths[0],  
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);  // 开发者服务器返回的数据
			}
		});
	}
});

综合示例

上传图片

使用新的 API chooseMedia 实现 ( 可以参考一下官方文档 或者等我总结更新 )

    const maxCount = fileMap.imageUrls ? fileMap.maxSize - fileMap.imageUrls.length : fileMap.maxSize; // 限制最多可以选择的图片张数
    uni.chooseMedia({
        count: maxCount,
        mediaType: ["image"],
        sizeType: ["compressed"],
        camera: "back",
        success: (res) => {
            const tempFiles = res.tempFiles;
            const accept = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"];
            let fail = false;
            // 在小程序端, uploadFile 不支持 多个文件上传 
            // 通过 forEach 实现多文件上传
            tempFiles.forEach((item, index) => {
                console.log("压缩之后的图片大小", item.size)
                // 获取后面的拓展名 
                const extension = item.tempFilePath.split(".")[1];
                // 匹配上面 accept , 如果不在的话 或者 大小过大 就取消上传
                if (accept.indexOf(extension) === -1 || Number(item.size) >
                    Number(
                        5242880) ||
                    fileMap.imageUrls.length >= fileMap.maxSize
                ) {
                    fail = true;
                } else {
                    // 上传文件 item 为 临时路径
                    this.uploadFile(item, fileMap);
                }
            });
            if (fail) {
                uni.showToast({
                    title: `仅支持照片文件，最大支持5M，最多传${fileMap.maxSize}张`,
                    icon: "none",
                    duration: 3000,
                });
            }
        },
    });

uni.loadFile上传服务器

uploadFile(file, fileMap) {
  this.showLoading = true;
  // 以文件流的方式上传文件
  uni.uploadFile({
    url: config.baseUrl + '/common/uploadFile',
    filePath: file.tempFilePath || '',
    name: 'file',
    formData: {},
    headers: { 'Content-Type': 'multipart/form-data' },
    success: (uploadFileRes) => {
      this.showLoading = false;
      console.log('uploadFileRes>>',uploadFileRes);
      // 返回值: errMsg 错误信息  data 服务器返回数据  statusCode: HTTP 状态码
      if (uploadFileRes && uploadFileRes.errMsg == 'uploadFile:ok') {
        let picItem = uploadFileRes && uploadFileRes.data ? JSON.parse(uploadFileRes.data) || {} : {}
        if (picItem.errCode == -1) {
          let url = picItem.data || ''
          const result = { data: {url} }
          this.addImageInfoEvt(fileMap, result) // 更新图片列表
        } else {
          uni.showToast({
            icon: 'error',
            title: picItem.errMsg || '文件上传失败，请重试'
          })
        }
      }
    },
    fail: (err) => {
      this.showLoading = false;
      console.log('图片上传接口调用失败', err)
    }
  })
}