vue代码

   <el-upload
        ref="upload"
        class="avatar-uploader define-uploader"
        accept=".jpg, .jpeg, .png"
        :file-list="fileList"
        :auto-upload="false"
        :show-file-list="false"
        action
        :http-request="carouselUpload"
        :on-change="handleChange"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i> 
     </el-upload>
     
	<el-button plain @click="uploadFile()">手动上传</el-button>

js代码

 <script>
 	export default{
 		data(){
 		 fileList: [],
 		 imageUrl:"",
		},
		methods:{
		 handleChange(file, fileList) {
		      var _this = this;
		      const isTypeTrue = /^image\/(jpeg|png|jpg)$/.test(file.raw.type);
		      const isLt300K = file.raw.size / 1024 < 300;
		      // _this.saveData.imageUrl ="";
		      if (!isLt300K) {
		        this.$message.error("上传图片大小不能超过300K!");
		        return;
		      }
		      if (!isTypeTrue) {
		        this.$message.error("上传图片格式不对!");
		        return;
		      }
		     
		      new Promise(function(resolve, reject) {
		        //upload内部需要一个promise,简单的return出false并没有什么用
		        let width = 714;
		        let height = 280;
		        let _URL = window.URL || window.webkitURL;
		        let img = new Image();
		        img.onload = function() {
		          let valid = img.width == width && img.height == height;
		          valid ? resolve() : reject();
		        };
		        img.src = _URL.createObjectURL(file.raw); //onload是异步加载
		      }).then(
		        () => {
		          _this.imageUrl = URL.createObjectURL(file.raw);
		          console.log("222");
		          return file.raw;
		        },
		        () => {
		          this.$message.error("上传的图片必须是714*280!");
		          return Promise.reject();
		        }
		      );
		
		      if (fileList.length > 0) {
		        this.fileList = [fileList[fileList.length - 1]]; // 这一步,是 展示最后一次选择的csv文件
		      }
		    },
		
		    carouselUpload(param) {
		       //此处写手动上传的方法,上传的地址及方式;
		    },
		    //手动上传
		    uploadFile(){
		    //这里上传的执行的就是carouselUpload() 方法;
     		  this.$refs.upload.submit();
			}
		}
 	}
</script>
Logo

前往低代码交流专区

更多推荐