vue上传图片

                      <el-form-item label="封面照片：" prop="cover">
                        <el-upload
                          class="upload-demo"
                          action="https://community/file/upload"
                          :on-preview="handlePreview1"
                          :on-success="handleSuccess1"
                          :on-remove="handleRemove1"
                          :before-remove="beforeRemove1"
                          multiple
                          :limit="1"
                          :on-exceed="handleExceed1"
                          :file-list="image"
                        >
                          <el-button size="small" type="primary" plain
                            >点击上传</el-button
                          >
                          <div>
                            <img
                              :src="imgPath + ruleForm1.cover"
                              alt=""
                              style="width: 100px; height: 100px"
                              v-if="ruleForm1.cover"
                            />
                          </div>
                        </el-upload>
                      </el-form-item>

data() {
    return {
      cover: [],
      imgPath: "http://qiniu", //前缀
      ruleForm1: {
        cover: "", //封面照片
      },
}

  methods: {
	    //上传图片2
	    handleRemove1(file, cover) {
	      this.ruleForm1.cover = "";
	      console.log(file, cover);
	    },
	    handlePreview1(file) {
	      console.log(file);
	    },
	    handleSuccess1(response) {
	      if (response.code === 0) {
	        this.ruleForm1.cover = response.content[0];
	      }
	    },
	    handleExceed1(files, cover) {
	      this.$message.warning(
	        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
	          files.length + cover.length
	        } 个文件`
	      );
	    },
	    beforeRemove1(file) {
	      return this.$confirm(`确定移除 ${file.name}？`);
	    },
    }

标签：files,vue,cover,ruleForm1,length,file,上传,response,图片
来源： https://blog.csdn.net/weixin_44289771/article/details/122823064