vue如何实现文件上传及预览

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) {

//这个是定时触发的事件，文件较大的时候较明显

//console.log(e)

var p = "已完成：" + Math.round(e.loaded / e.total * 100) + "%";

$(".file_upload")

.find(".progress")

.html(p);

console.log("uploading"); //文件较大，就会出现多个uploading

};

reader.onabort = function() {

console.log("abort"); //用作取消上传功能

};

reader.onerror = function() {

console.log("error"); //文件读取出错的时候触发，暂模拟不出

};

//成功后 获取文件url

reader.onload = function(e) {

console.log("load complete"); //完成

console.log(e);

let res = e.target.result.split(";"); //截取 data:; base64 转换后默认会有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以内的图片！");

// return false;

// }

}

}

};

</script>

vue多文件上传并预览

多文件上传预览基本思路

1、获取所上传的文件，input发生change事件时获取 e.target.files，这个变量就是文件列表

2、文件上传用的时FormData格式，这里我循环遍历了文件列表，并把文件append到FormData对象里

3、提交时把FormData对象提交到服务器即可

4、预览功能我用的FileReader的readAsDataURL方法将上传图片转为base64

5、读取操作是异步读取，这里用了Promise，读取操作完成后，触发onload事件，返回一个resolve状态并带上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) {

      // 选择图片后触发，将文件放到 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将数据发送到服务器

        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)

        })

      }

    }

总结

以上为个人经验，希望能给大家一个参考

 

参考文章：http://blog.ncmem.com/wordpress/2023/12/11/vue%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%8f%8a%e9%a2%84%e8%a7%88/

欢迎入群一起讨论