上传视频组件

liweilong

2020-12-24 3fccf2450a3ed31ceca512551858f886b30c499d

 src/pages/demo/form.vue

@@ -32,23 +32,11 @@
          图片：<br><span>(668*164像素)</span>
        </span>
        <!-- 上传图片组件(单图) -->
        <el-upload
        <UploadSingleImg
          ref="refUploadImg"
          accept="image/jpeg,image/jpg,image/gif,image/png"
          :auto-upload="false"
          list-type="picture-card"
          :class="{disabled:uploadDisabled}"
          action="#"
          :limit="1"
          :file-list="mData.uploadImgs"
          :on-change="addUploadImg"
          :on-remove="delUploadImg"
          :http-request="uploadImg"
          :on-preview="uploadPreview"
          :before-upload="beforeUploadImg"
        >
          <i class="el-icon-plus" />
        </el-upload>
          v-model="mData.uploadImgs"
          @change.capture="$refs.refDialog.clearValidate()"
        />
      </el-form-item>
      <el-form-item label="是否上架：">
        <el-switch v-model="mData.isUp" :active-value="1" :inactive-value="0" />
@@ -75,10 +63,11 @@
<script>
import WangEnduit from '@/components/WangEnduit' // 富文本
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
import UploadSingleImg from '@/components_simple/UploadSingleImg'
import Area from '@/utils/area' // 地区选择
export default {
  name: 'DemoForm',
  components: { WangEnduit },
  components: { WangEnduit, UploadSingleImg },
  mixins: [
    mixin_upload
  ],
@@ -159,62 +148,14 @@
    },
    // 富文本相关

    // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
      }
      return isImg
    },
    // 增加图片
    addUploadImg(file, fileList) {
      this.mData.uploadImgs = fileList
      this.$refs.couponForm.validateField('uploadImgs')
    },
    // 删除图片
    delUploadImg(file, fileList) {
      this.mData.uploadImgs = fileList
    },
    // 上传图片
    uploadImg(res) {
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      this.postFN({
        url: 'admin/image/upload',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxxx'
          }
        }
      }, (inf) => {
        console.log('上传图成功')
        this.$set(this.mData, 'imgUrl', inf.imgUrl)
        console.log('上传图结束')

        // 上传完图片
        this.submitReq()
      })
    },
    // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    submit() {
      this.$refs['couponForm'].validate(valid => {
        if (valid) {
          if (this.checkNeedUpload(this.mData.uploadImgs)) {
            console.log('开始上传图片')
            // 先上传图片，再提交
            this.$refs.refUploadImg.submit()
          } else {
            // 提交
          // 上传图片
          this.$refs.refUploadImg.runUploadImg((imgUrl) => {
            imgUrl && this.$set(this.mData, 'imgUrl', imgUrl)
            this.submitReq()
          }
          })
        }
      })
    },