vant weapp 多选上传图片_vant中使用van-uploader上传图片

van-uploade

对于进行封装为组件< afterSaleImage >

使用方法如下:

:UUIDStr="UUIDStr"

:imageList="imageList"

v-on:imageListChange="imageListChange"

/>

其中：

UUIDStr ：随机生成的UUID

imageList：编辑的时候传的图片列表

imageListChange:监听选择图片数组的变化

/*

* 生成UUID

*/

export const UUID = () => {

var d = new Date().getTime()

var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {

var r = (d + Math.random() * 16) % 16 | 0

d = Math.floor(d / 16)

return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)

})

return uuid

}

this.UUIDStr = UUID();

// --图片

imageListChange(imageList) {

this.imageList = imageList;

},

以下是组件内部的代码

class="posting-uploader-item"

v-for="(item, nn) in postData"

:key="nn"

>

name="close"

src="../../assets/image/icon/icon_delete@3x.png"

@click="delImg(nn)"

class="delte"

/>

:after-read="onRead"

:accept="'image/*'"

v-show=" postData.length <= 2"

result-type="text"

v-on:oversize="oversize"

>

src="../../assets/image/icon/defaultImage@3x.png"

alt="等待传图"

class="imgPreview"

/>

export default {

props: {

UUIDStr: String,

imageList: Array

},

data () {

return {

postData: []

}

},

mounted () {

this.postData = this.imageList

},

watch: {

imageList (value) {

this.postData = value

}

},

methods: {

delImg (index) {

// 删除指定下标的图片对象

if (isNaN(index) || index >= this.postData.length) {

return false

}

// let param = {

// id: this.postData[index].id

// }

this.$api.deleteFile(this.postData[index].id).then(res => {

if (res.code === 0) {

this.postData.splice(index, 1)

this.$emit('imageListChange', this.postData)

}

})

// let tmp = []

// for (let i = 0, len = this.postData.length; i < len; i++) {

// if (this.postData[i] !== this.postData[index]) {

// tmp.push(this.postData[i])

// }

// }

// this.postData = tmp

},

oversize(){

this.$toast("图片太大了");

},

onRead (file) {

// console.log(file)

// console.log(file.content.length)

let formData = new FormData()

formData.append('file', file.file)

this.$api.fileUpload(formData, this.UUIDStr).then(res => {

if (res.code === 0) {

file.content = res.data.filePath

file.businessId = res.data.businessId

file.createDate = res.data.createDate

file.id = res.data.id

this.postData.push(file)

this.$emit('imageListChange', this.postData)

}else{

this.$toast(res.msg);

}

})

}

}

}

.contain {

margin-top: 10px;

padding-bottom: 10px;

background-color: white;

padding-top: 10px;

}

.image {

width: 50px;

height: 50px;

}

.uploader {

display: flex;

flex-direction: row;

}

.posting-uploader {

display: flex;

flex-direction: row;

margin-left: 14px;

}

.posting-uploader-item {

display: flex;

flex-direction: row;

}

.imgPreview {

width: 70px;

height: 70px;

}

.delte {

margin-left: -15px;

width: 10px;

height: 10px;

margin-right: 20px;

}

.upload-img-5 {

margin: 5px 0 90px 0;

}

.upload-img-1 {

margin: 5px 0 15px 0;

}

全局的请求接口方法

上传文件的Content-Type是:multipart/form-data

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;'

// 上传图片

fileUpload(params, UUID) {

return fetchData(baseUrl + '/ec/app/front/unauth/filePtctureController/fileUpload', params, 'post', 'multipart/form-data;', UUID)

},

切记在拦截器里面要设置一下config

// 拦截器

axios.interceptors.request.use((config) => {

store.commit('updateLoadingStatus', true)

if (config.method === 'post' && axios.defaults.headers.post['Content-Type'] === 'multipart/form-data;') {

return config

}

if (config.method === 'post' && axios.defaults.headers.post['Content-Type'] === 'application/x-www-form-urlencoded') {

config.data = qs.stringify(config.data)

} else {

config.data = JSON.stringify(config.data)

}

return config

}, (error) => {

return Promise.reject(error)

})