vue上传图片

vue上传图片

<el-form-item label="图标：" :inline="true">
        <el-upload
          action="#"
          list-type="picture-card"
          :class="{hide:hideBackgroundUploadEdit}"
          :on-preview="handlebackgroundPreview"
          :on-remove="handlebackgroundRemove"
          :on-change="handlebackgroundChange"
          :on-progress ="handlebackgroundProgress"
          :on-exceed="exceedFile"
          :http-request="uploadImage"
          :before-upload="beforeBackgroundUpload"
          :file-list="backgroundFile"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog title="图标" :append-to-body = true :visible.sync="newDialogVisible">
          <img width="100%" :src="dialogBackgroundUrl">
        </el-dialog>
      </el-form-item>

引入

import axios from 'axios'

data

ruleForm: {
          // 图标
          backgroundPicture:[],
          //如果haveBKPicture == 1 有图片就是编辑表单否则就是新增表单
          haveBKPicture:0,
        },
// 图标
        newDialogVisible:false,
        dialogBackgroundUrl:"",
        backgroundFile:[],
        backgroundSrc:"",
        hideBackgroundUploadEdit:false,

methods

// 图标
      handlebackgroundPreview(file) {
        this.dialogBackgroundUrl = file.url
        this.newDialogVisible = true
      },
      handlebackgroundChange(file, fileList) {
        this.hideBackgroundUploadEdit = fileList.length >= this.limitNum;
        if( fileList.length > 0 ){
          this.ruleForm.haveBKPicture = 1
        }else{
          this.ruleForm.haveBKPicture = 0
        }
      },
      handlebackgroundRemove(file, fileList) {
        this.ruleForm.haveBKPicture = 0
        this.hideBackgroundUploadEdit = fileList.length >= this.limitNum
      },
      handlebackgroundProgress(file){
      },
      uploadImage(item){
        this.ruleForm.backgroundPicture.push(item.file)
      },
      beforeBackgroundUpload(file){
        const isJPG = file.type === 'image/jpeg'
        const isPng = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG && !isPng) {
          this.$message.error('上传图片只能是 JPG或png 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG || isPng) && isLt2M
      },
      exceedFile(files, fileList) {
        this.$notify.warning({
          title: '警告',
          message: `只能选择${this.limitNum}个文件`
        });
      },
      uploadImg() {
        this.$refs.uploadFile.submit()
      },
      backgroundUrl(backgroundIcon){
        this.backgroundFile = []
        const fileListObj = {}
        fileListObj.url = constant['weburl'] + "api" + backgroundIcon
        this.backgroundFile.push(fileListObj)
      },
      save() {
      	var formdata=new FormData();
      	this.ruleForm.backgroundPicture.forEach(function (file) {
          formdata.append('backgroundPicture',file);
          formdata.append("haveBKPicture",this.ruleForm.haveBKPicture)
        })
        this.$refs['ruleForm'].validate((valid) => {
              if (valid) {
                this.loading = true;
                const token = "token"
                const url1 = "ajax"+token
                axios({
                  url:url1,
                  method: 'post',
                  data: formdata,
                  headers:{
                    // 'Content-Type':'multipart/form-data',
                    'Content-Type':'multipart/form-data;boundary='+ new Date().getTime(),
                    token: "token"
                  }
                }).then(res=>{
                  try {
                    this.loading = false
                    if (res.data.data.ok == true) {
                      this.$message('保存成功!')
                      this.$emit('onload')
                      this.innerVisible = false
                    } else {
                      this.$message('必填字段不能为空')
                    }
                  } catch (e) {
                    this.$message(e)
                  }
                })
              }
            })
      }

style

.hide .el-upload--picture-card{
    display: none;
  }

for (let keys of formData.values()) {
console.log(keys);
}