小程序上传图片+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')
},
希望能帮助到大家，同时祝愿大家在开发旅途中愉快！！！