UniApp上传图片

原创

皮皮的小猪仔 2023-07-26 11:43:03 博主文章分类：Vue ©著作权

©著作权归作者所有：来自51CTO博客作者皮皮的小猪仔的原创作品，请联系作者获取转载授权，否则将追究法律责任

小程序大家应该都知道，通过上传组件得到的都是本地的一个临时路径，这个路径是不能被外网访问的，所以我们就需要将拿到的临时路径转成Base64上传到后台服务器。或者说是另外一个办法，就是通过组件直接上传文件，这个看需求设计吧。

一、Base64上传

1.下载图片转换工具image-tools

NPM
--安装组件
npm i image-tools --save
--引用组件
import { pathToBase64, base64ToPath } from 'image-tools'

2.通过组件上传

// 新增图片
async afterRead(e) {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  console.log(e.file.url);
  pathToBase64(e.file.url).then(base64 => {
    console.log(base64);
    uni.request({
      url: '后台上传地址',
      method: 'POST',
      data: {
        image: base64,
      },
      success: (res) => {
        if (res.data.code == 200) {
        } else {
        }
      },
      fail: (error) => {
        console.log(error);
      }
    })
  }).catch(error => {
    console.error(error);
  })
}

二、文件上传

// 新增图片
async afterRead(event) {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  console.log(event.file.url);
  const result = await this.uploadFilePromise(event.file.url)
  this.model.image = result;

},
uploadFilePromise(url) {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: '后台上传地址', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: 'test'
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data)
        }, 1000)
      }
    });
  })
}