| | |
| | | 分享图片:<br><span>(500*400像素)</span> |
| | | </span> |
| | | <!-- 上传图片组件(单图) --> |
| | | <el-upload |
| | | ref="refUploadShareImg" |
| | | :auto-upload="false" |
| | | list-type="picture-card" |
| | | :class="{disabled:uploadDisabled}" |
| | | action="#" |
| | | :limit="1" |
| | | :file-list="basicData.uploadShareImgs" |
| | | :on-change="addUploadFiles" |
| | | :on-remove="delUploadFiles" |
| | | :http-request="uploadFileHandle" |
| | | :on-preview="uploadPreview" |
| | | :before-upload="beforeUploadImg" |
| | | > |
| | | <i class="el-icon-plus" /> |
| | | </el-upload> |
| | | <UploadSingleImg |
| | | ref="refUploadImg" |
| | | v-model="basicData.uploadShareImgs" |
| | | @change.capture="$refs['basicForm'].clearValidate()" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | |
| | | |
| | | <script> |
| | | import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览 |
| | | import UploadSingleImg from '@/components_simple/UploadSingleImg' |
| | | export default { |
| | | components: {}, |
| | | components: { UploadSingleImg }, |
| | | mixins: [mixin_upload], |
| | | data() { |
| | | return { |
| | |
| | | required: true, message: '请选择图片' |
| | | }] |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | uploadDisabled() { |
| | | return this.basicData.uploadShareImgs.length > 0 |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | this.$router.go(-1) |
| | | }, |
| | | |
| | | // 上传支付文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ |
| | | // 上传前确认格式 |
| | | beforeUploadImg(file) { |
| | | const isImg = file.type.indexOf('image/') > -1 |
| | | if (!isImg) { |
| | | this.$message.error('必须是选择图片文件') |
| | | } |
| | | return isImg |
| | | }, |
| | | // 增加文件 |
| | | addUploadFiles(file) { |
| | | this.basicData.uploadShareImgs = [file] |
| | | }, |
| | | // 删除文件 |
| | | delUploadFiles(file, fileList) { |
| | | this.basicData.uploadShareImgs = fileList |
| | | }, |
| | | // 执行上传单文件 |
| | | runUploadFiles(cb) { |
| | | if (this.checkNeedUpload(this.basicData.uploadShareImgs)) { |
| | | this.$refs.refUploadShareImg.submit() |
| | | } else { |
| | | cb && cb() |
| | | } |
| | | }, |
| | | // 上传分享图 |
| | | uploadFileHandle(res) { |
| | | const file = res.file |
| | | const formData = new FormData() |
| | | formData.append('file', file) |
| | | console.log(formData) |
| | | this.postFN({ |
| | | url: 'admin/image/upload', |
| | | header: { 'Content-Type': 'multipart/form-data' }, |
| | | params: formData, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | imgUrl: 'xxx' |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | this.basicData.shareImg = inf.imgUrl |
| | | // this.$refs.refUploadShareImg.clearFiles(); |
| | | this.submitReq() |
| | | }) |
| | | }, |
| | | // 上传支付文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ |
| | | |
| | | // 提交编辑 |
| | | submit() { |
| | | this.$refs['basicForm'].validate(valid => { |
| | | if (valid) { |
| | | this.runUploadFiles(() => { |
| | | // 上传图片 |
| | | this.$refs.refUploadImg.runUploadImg((imgUrl) => { |
| | | imgUrl && this.$set(this.basicData, 'shareImg', imgUrl) |
| | | this.submitReq() |
| | | }) |
| | | } |