一、后台管理上传图片
<el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" list-type="picture" :headers="headerObj">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
<img :src="previewPath" class="previewImg" />
</el-dialog>
data(){
return {
......
addForm: {
goods_name: '',
goods_price: 0,
goods_weight: 0,
goods_number: 0,
goods_cat: [],
pics: []
},
uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
headerObj: { Authorization: window.sessionStorage.getItem('token') },
previewPath: '',
previewVisible:false
}
},
methods:{
.......
handlePreview(file) {
this.previewPath = file.response.data.url
this.previewVisible = true
},
handleRemove(file) {
const filePath = file.response.data.tmp_path
const index = this.addForm.pics.findIndex(item => item.pic === filePath)
this.addForm.pics.splice(index, 1)
},
handleSuccess(response) {
this.addForm.pics.push({ pic: response.data.tmp_path })
}
}