在Vue中引用代码
template中写
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addsave(scope.row)">上传</el-button>
</template>
</el-table-column>
<el-dialog title="上传文件" :visible.sync="uploadoss" width="30%">
<div style="display: flex;text-align: center;justify-content: center">
<el-upload
:action="url"
:file-list="fileList"
multiple
:limit="limts"
drag
:before-upload="beforeUploadHandle"
:on-success="successHandle"
class="text-center">
<i class="el-icon-upload"></i>
<div class="el-upload__text" v-html="$t('upload.text')"></div>
<div class="el-upload__tip" slot="tip">{{ $t('upload.tip', { 'format': 'jpg、png、gif' }) }}</div>
</el-upload>
</div>
</el-dialog>
script中写
import Cookies from 'js-cookie'
这个import是重中之重,少了不行,我就是少了这个一直没成功
data(){
retrun{
url: '',
num: 0,
fileList: [],
limts:1,
uploadoss:false,
dataForm1: {
picAddr: '',
zcNo: '',
prdNo: '',
id: '',
bomNo: '',
name: '',
zcItm: '',
zcName: '',
dep: '',
cusNo: ''
},
}
}
优先加载this.init()
mounted() {
this.init()
// this.getmoNo()
},
methods:{
init (){
this.url = `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`
this.num = 0
this.fileList = []
},
addsave(e){
this.dataForm1=e
this.uploadoss=true
},
//上传之前
beforeUploadHandle (file) {
/*if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
return false
}*/
this.num++
},
// 上传成功
successHandle (res, file, fileList) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.fileList = fileList
this.num--
if (this.num === 0) {
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.uploadoss = false
this.$emit('refreshDataList')
}
})
this.dataForm1.picAddr = res.data.src
console.log(this.dataForm1)
this.saveList()
}
},
saveList(){
this.$http.post('/demo/mesdrawing/savadrawing',this.dataForm1)
.then(({ data: res }) => {
if(res.code!==0){
return this.$message.error("错误")
}
this.$message({
message: "操作成功",
type: 'success',
duration: 500,
onClose: () => {
this.$emit('refreshDataLists')
}
})
}).catch((error) => {
console.log(error)
});
},
}