vue获取本地图片展示到页面上方法
<td style="padding: 50px 0;">
<Upload ref="upload" :show-upload-list="false" :before-upload="uploadImg" multiple type="drag"
accept=".jpg, .jpeg, .png, .bmp" action="/chenfan_api/file/upload"
style="display: inline-block;width: 100px;" v-if="!imgUrlSrc&&(pageType==='new'||pageType==='edit')">
<div style="width: 100px;height: 100px;line-height: 100px;">
<Icon type="ios-camera" size="20"></Icon><span class="picName">款式图</span>
</div>
</Upload>
<div class="demo-upload-list" v-if="imgUrlSrc">
<img :src="imgUrlSrc">
<div class="demo-upload-list-cover" v-if="pageType==='new'||pageType==='edit'">
<Icon type="ios-trash-outline" @click.native="removeImg()"></Icon>
</div>
</div>
</td>
uploadImg(file) {
let formData = new FormData()
formData.append('file', file)
this.$axios({
url: '/chenfan_api/file/upload',
method: 'post',
data: formData
}).then((data) => {
if (data.code === 200) {
this.data.sampleCheckPrice.imgUrl = data.obj[0].id
getImgBlobSrc(data.obj[0].id).then(src => this.imgUrlSrc = src)
}
})
return false
},
// 获取图片src
export const getImgBlobSrc = (id) => {
return new Promise((resolve, reject) => {
if (id) {
axios({
url: `/chenfan_api/file/view/${id}`,
method: 'get',
responseType: 'blob'
}).then((data) => {
let blob = data
let src = window.URL.createObjectURL(blob)
resolve(src)
})
} else {
resolve('')
}
})
}
删除
removeImg() {
this.data.sampleCheckPrice.imgUrl = ''
this.imgUrlSrc = ''
},
