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)
})