小程序上传图片+vue上传图片

1.小程序 + vant

示例：https://youzan.github.io/vant-weapp/#/uploader#ji-chu-yong-fa.
引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {
  "van-uploader": "@vant/weapp/uploader/index"
}

基础用法

<van-uploader
  preview-size="60px"
  file-list="{{ officialLetterImage }}"
  max-count="1"
  bind:after-read="afterRead"
  data-name='officialLetterImage'
  catch:delete="deleteImg"
/>

const config = require("../../../../config.js");
Page({
  data: {
    officialLetterImage: [],
  },
  

  afterRead(event) {
    const { file } = event.detail;
    let that = this
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      // url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
      url: config.commonUpload, 
      filePath: file.url,
      name: 'file',
      // formData里面 bucket => oss域名   path => 路径
      formData: { bucket: 'shiaduai-legalrobot-bzXX', path: 'wx_uploadtest/commonInfo' },
      success(res) {
        let fileImgList = JSON.parse(res.data)
        if (fileImgList.code == 0) {
          const fileList = that.data[event.target.dataset.name];
          fileList.push({ 
            url: fileImgList.data.list[0],
            name: 'file',
          });
          that.setData({ [event.target.dataset.name]:fileList });
        }
      },
    });
  },
  
  //图片上传-点击删除
  deleteImg(e){
    let name = e.target.dataset.name;
    this.data[name].splice([e.detail.index],1)
    this.setData({ [name]: this.data[name]});
    let img_list=[]
    this.data[name].forEach(element => {
      img_list.push(element.url)
    });
  },
  
})

2.vue + elementui

示例：https://element.eleme.io/#/zh-CN/component/upload.

  <el-form-item label="上传图片：">
    <el-upload :limit="5" action="/api/commonin/uploadd" :data="{bucket: 'shiaduai-legalrobot-bzin',path: 'wx_uploaddde/commonfo'}" list-type="picture-card" :file-list="fileList"
      :on-preview="handlePictureCardPreview" :on-success="handleAvatarSuccess" :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-form-item>

  data () {
      fileList: [], // 数据格式 [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/'}]
      dialogImageUrl: '',
      dialogVisible: false,
  },
  
  methods: {
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传成功
    handleAvatarSuccess (res, file, fileList) {
      const { uid, status } = file
      if (res.data.list.length) {
        this.fileList.push({ uid, status, url: file.response.data.list[0] })
      }
    },
    // 删除
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
  }

3.vue + vant

<Uploader
  :after-read="res => uploadSuccess(res, 'relevantMaterialCertificate')"
  @oversize="overSize"
  :max-size="10 * 1024 * 1024"
  v-model="applyData.relevantMaterialCertificate"
  multiple
  preview-size='2.58rem'
  capture="camera"
  :max-count="9"
></Uploader>

  data () {
    // 这里存放数据
    return {
      relevantMaterialCertificate: [],
      applyData: {
        relevantMaterialCertificate: []
      }
    }
  },
  
	uploadSuccess (file, type) {
      console.log(file, type)
      const data = new FormData()
      data.append('path', 'FZWGJConsultPic') // bucket => oss域名   path => 路径
      data.append('bucket', 'shiadu-legalrobot-bzXX')

      const v = file.length ? file : [file]
      console.log(v)
      v.forEach(row => {
        data.append('file', row.file)
      })
      Toast.loading({
        message: '上传中...',
        duration: 0,
        forbidClick: true
      })
      this.Api.commonUpload(data).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          Toast.success('上传成功！')
          this[type] = [...this[type], ...res.data.data.list]
        } else {
          Toast.fail('上传失败！')
        }
      })
    },

	overSize () {
      Toast.fail('图片大小不能超过10MB')
    },

希望能帮助到大家，同时祝愿大家在开发旅途中愉快！！！

拿着 不谢 请叫我“锤” ！！！