前端图片上传

1.展示

{
title: ‘海报’,
key: ‘posterUrl’,
minWidth: 100,
align: ‘center’,
render: (h, params) => {
return h(‘img’, {
style: {
maxWidth: ‘100px’,
maxHeight: ‘100px’,
verticalAlign: ‘middle’
},
attrs: {
// src: this.$cmmApp.cmmResUrl(params.row.moviePicSrc)
src: params.row.posterUrl（后端传输地址）
},
on: {
‘click’: () => {
this.detail(params.row)
}
}
})
}
2.上传 展示
效果图

        <FormItem prop="moviePicSrc" label="海报">
          <Upload v-model="formInline.posterUrl" :before-upload="handleUpload" action="">
            <Button icon="ios-cloud-upload-outline">选择图片</Button>
          </Upload>
          <div v-if="formInline.fileName !== ''">
            &nbsp;&nbsp;{{ formInline.fileName }}
            <Button type="text" @click="upload('posterUrl')" :loading="loadingStatus">
              上传</Button>
          </div>
          <img alt="" id="myImg1" v-bind:src="formInline.posterUrl"
            style="margin-top:5%;display: block;width:45%" />
        </FormItem>

async upload(type) {
this.loadingStatus = true;
console.log("文件 = ", this.file.name);
let param = new FormData() // 创建form对象
param.append(‘file’, this.file) // 通过append向form对象添加数据
param.append(“type”, “1”); // 文件类型
let config = {
headers: { ‘Content-Type’: ‘multipart/form-data’ }
}
let res = await this.$axios.$post(‘/device/image’, param, config);
console.log("res = ", JSON.stringify(res))
if (res && res.code === 200) {
console.log(‘已上传文件：path=’ + res.data);
if (type == ‘stillsUrl’) {
this.formInline.stillsUrl = res.msg;
} else {
this.formInline.posterUrl = res.msg;
}
}
this.loadingStatus = false;
},

/** 提交CSV后流处理方法 */
handleUpload(file) {
// 选择文件后触发验证关闭错误提示
// this.$refs[‘CSVfile’].validate(() => {})
let that = this
if (!/image/\w+/.test(file.type)) {
alert(‘请上传图片类型!’)
return
}
let reader = new FileReader()
// 读取文件
reader.readAsDataURL(file)
reader.onload = function (e) {
myImg.src = e.target.result
that.formInline.file = e.target.result
}
that.formInline.fileName = file.name
this.file = file;
return false
},