vue如何實現(xiàn)文件上傳及預覽

更新時間：2023年06月08日 15:02:14 作者：秦璐璐

這篇文章主要介紹了vue如何實現(xiàn)文件上傳及預覽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue文件上傳及預覽

<template>
<div id="file">
<input name="files" id="uploaderInput" type="file" accept="images/*" multiple @change="change"/>
<div class="file_upload">
<div class="progress"></div>
</div>
<div class="img_holder"></div>
</div>
</template>
<script>
export default {
name: "file",
methods: {
change(E) {
//獲取到獲取的圖片列表 （選擇多張）
let file = event.target.files[0];
//獲取到獲取的圖片列表 （選擇一張）
//let img1 = event.target.files[0];
//let reader = new FileReader();
//console.log($("#uploaderInput")[0].files);
//console.log(img1);
//let type = file.type; //文件的類型，判斷是否是圖片
//let size = file.size; //文件的大小，判斷圖片的大小
var reader = new FileReader(); //新建FileReader對象
reader.readAsDataURL(file); //讀取為base64
//以下代碼可以刪除
reader.onloadstart = function() {
console.log("start"); //開始讀取
};
//代碼進度條
reader.onprogress = function(e) {
//這個是定時觸發(fā)的事件，文件較大的時候較明顯
//console.log(e)
var p = "已完成：" + Math.round(e.loaded / e.total * 100) + "%";
$(".file_upload")
.find(".progress")
.html(p);
console.log("uploading"); //文件較大，就會出現(xiàn)多個uploading
};
reader.onabort = function() {
console.log("abort"); //用作取消上傳功能
};
reader.onerror = function() {
console.log("error"); //文件讀取出錯的時候觸發(fā)，暫模擬不出
};
//成功后 獲取文件url
reader.onload = function(e) {
console.log("load complete"); //完成
console.log(e);
let res = e.target.result.split(";"); //截取 data:; base64 轉(zhuǎn)換后默認會有data屬性判斷文件格式;分為兩段，前段為data，后端為文件base64編碼
if (res[0] != "data:application/apk;") {
// 不同瀏覽器會有不一樣的解析；so 這一步單獨處理
_this.apk.app = "data:application/apk;" + res[1];
} else {
_this.apk.app = e.target.result;
}
console.log(_this.apk.app)
};
//預覽代碼
reader.onloadend = function(e) {
var dataURL = reader.result,
image = '<img src="' + dataURL + '"/>', //預覽圖片
text = '<span>"' + dataURL + '"</span>'; //測試預覽text
var name = file.name,
size = Math.round(file.size / 1024);
var div = "<p>Name: " + name + "</p><p>Size: " + size + "kb</p>";
var imglist =
'<div class="img_box"><span class="delete">X</span>' +
image +
div +
"</div>";
$(".img_holder").html(imglist);
};
// if (this.imgData.accept.indexOf(type) == -1) {
// alert("請選擇我們支持的圖片格式！");
// return false;
// }
// if (size > 3145728) {
// alert("請選擇3M以內(nèi)的圖片！");
// return false;
// }
}
}
};
</script>

vue多文件上傳并預覽

多文件上傳預覽基本思路

1、獲取所上傳的文件，input發(fā)生change事件時獲取 e.target.files，這個變量就是文件列表

2、文件上傳用的時FormData格式，這里我循環(huán)遍歷了文件列表，并把文件append到FormData對象里

3、提交時把FormData對象提交到服務器即可

4、預覽功能我用的FileReader的readAsDataURL方法將上傳圖片轉(zhuǎn)為base64

5、讀取操作是異步讀取，這里用了Promise，讀取操作完成后，觸發(fā)onload事件，返回一個resolve狀態(tài)并帶上base64編碼的字符串

6、將base64這串字符賦給img元素的src，即可預覽圖片

template：

<input type="file" multiple @change="upload" /><br />
<img v-for="item in previewUrl" :src="item" width="100" /><br />
<button type="button" @click="submitFile">submitFile</button>

js：

data () {
	 return {
	   previewUrl: [],
	   formData: undefined
	 },
     methods: {
      preview (file) {
      // 獲取預覽圖片的base64
        return new Promise((resolve, reject) => {
          let read = new FileReader()
          read.readAsDataURL(file)
          read.onload = function(e) {
            resolve(this.result)
          }
        })
      },
      upload (e) {
      // 選擇圖片后觸發(fā)，將文件放到 formdata 對象里
        this.previewUrl = []
        const files = e.target.files
        const that = this
        this.formData = new FormData()
        console.log(files)
        for(let file of files){
          this.formData.append('file', file)
          this.preview(file).then(res => {
            that.previewUrl.push(res)
          })
        }
        console.log(this.formData.getAll('file'))
      },
      submitFile (file, fileList) {
      // axios將數(shù)據(jù)發(fā)送到服務器
        let setting = {
          url: 'http://localhost:3000/uploadfile',
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: this.formData
        }
        this._axiosMock(setting).then(res => {
          console.log(res)
        })
      }
    }