獲取Element ui 上傳圖片的URL顯示上傳圖片

      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://xxx.xx.xx.xx:8080/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-exceed="handleExceed"
        :on-success="fileUploadSuccess"
        :on-change="imgPreview"
        :limit="1"
        :file-list="fileList"
        :auto-upload="false">
        <el-button size="small" type="primary">點擊上傳</el-button>
      </el-upload>
      
      <img v-if="posterURL" :src="posterURL" width="600" height="600" class="avatar">
      
        export default {
		    data() {
		       return {
		         postURL: ''
               }
             }, 
             methods: {
                  ...
			      imgPreview(file, fileList) {
			        let fileName = file.name;
			        let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
			        if (regex.test(fileName.toLowerCase())) {
			          this.posterURL = URL.createObjectURL(file.raw)  // 獲取URL
			        } else {
			          this.$message.error('請選擇圖片文件');
			        }
			      },
			      ...
			 }     
	    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章