标签：files vue cover ruleForm1 length file 上传 response 图片

                      <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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。