文件上传和amp;图片上传

文件上传、文件预览、拖拽上传的方法

文件上传实在太常用了，今天总结一下

一、文件上传

js 的formData文件上传

const input = document.querySelector("#upload");
input.click();

input.addEventListener('change',(e) => {
	// 这个本质还是通过Dom获取文件,创建一个formData对象，append传入文件信息，在调后端提供的要求传入formData的接口就可以了
	const files = e.target.files;
        const formData=new FormData()
        formData.append('file',files[0])
        
},false);

二、文件预览

方法1:通过FileReader实现

javascript
复制代码
const input = document.querySelector("#upload");
input.addEventListener('change',function(){
	const files = this.files;
	const fileList = Object.entries(files).map(([_,file]) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = (e) => {
			file.preview = e.target.result;
		}
		return file;
	});
	
	/* 
	*  file中的preview存的就是可以预览使用url,如果你需要保证fileList的顺序,
	*  请不要使用这种方式,你可以采用索引的方式存储,来保证它的顺序一致性
	*/
	console.log(fileList);
},false);
用fileList遍历图片就可以预览图片了

方法2:通过window.URL.createObjectURL()实现

javascript
复制代码
const input = document.querySelector("#upload");
input.addEventListener('change',function(){
	const files = this.files;
	const fileList = Object.entries(files).map(([_,file]) => {
		const preview = window.URL.createObjectURL(file);
		file.preview = preview;
		// 需要在合适的实际进行销毁,否则只有在页面卸载的时候才会自动卸载.
		// window.URL.revokeObjectURL(preview);
		return file;
	});
	
	/* 
	*  file中的preview存的就是可以预览使用url
	*/
	console.log(fileList);
},false);

三、拖拽上传excel

 <input   ref="excel-upload-input"
          class="excel-upload-input"
          type="file"
          accept=".xlsx, .xls"
          @change="uploadChange"
        >
        <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
          <i class="el-icon-upload" />
          <el-button type="text" @click="getTemplate">下载导入模板</el-button>
          <span>将文件拖到此处或
            <el-button type="text" @click="handleUpload">点击上传</el-button>
          </span>
        </div>
      </div>

 // 拖拽移动事件
   handleDragover(e) {
     e.stopPropagation()
     e.preventDefault()
     // 拷贝源文件上传，支持的值还有 move、link（快捷方式）
     e.dataTransfer.dropEffect = 'copy'
   },

   // 拖拽松手和拖拽进入盒子
   handleDrop(e) {
     e.stopPropagation()
     e.preventDefault()
     // !拿到文件信息（拖拽拿文件信息就是这么拿的）
     const files = e.dataTransfer.files
     if (files.length !== 1) {
       this.$message.error('Only support uploading one file!')
       return
     }
     // 取第一个文件
     const rawFile = files[0] // only use files[0]

     // 判断是不是 Excel
     if (!this.isExcel(rawFile)) {
       this.$message.error('只能上传一个文件')
       return false
     }
     // 触发文件上传事件,传入第二个参数用来区分是点击上传的文件还是拖拽上传的文件
     this.uploadChange(rawFile, true)
     e.stopPropagation()
     e.preventDefault()
   },
   
// 文件上传事件
   async uploadChange(e, isDrag = false) {
   // 当文件拖拽到dropBox区域时,可以在该事件取到files
     const files = e.dataTransfer.files
     // const file = e.target.files?.[0] // input 的文件列表
     let file
     if (isDrag) {
       file = e
     } else {
       file = e.target.files?.[0]
     }
     if (file) {
       // 大于0 说明有文件要上传
       const data = new FormData()
       // file: file类型
       /* 这个第一个参数是key，后台要求必须这么写 */
       data.append('file', file) // 将文件参数加入到formData中
       try {
         await uploadExcel(data)
         // 成功
         this.$emit('getList') // 通知父组件 我上传成功
         this.$emit('update:showExcelDialog', false) // 关闭弹层
         this.$message.success('上传成功')  
       } catch (error) {
         // 捕获失败
         console.log(e)
              } finally {
         // 不论成功或者失败都会执行finally
         /* //把input fi1e框种的va1ue清空，防止两次上传同个文件不触发 onChange
          */
         this.$refs['excel-upload-input'].value = ''
       }
     }
   
     // 0.给input绑定change事件和ref
     // (1)获取change的事件对象信息
     // （2）files存在就将文件参数加到formData中
     // （3）发送ajax请求上传文件
     // 2.调用子组件方法 刷新页面 关闭弹窗 提示
     // 3.bug解决，当两次上传同一个文件时无法触发change事件导致不能上传
     // 我们可以在finally中清除这个input的value，这样每次都能触发input的change事件了
   }
   ```

这篇好文章是转载于：学新通技术网