在过去，浏览器是不允许我们读取本地的文件，包括图片。因此，当我们需要预览一个图片的时候，往往先将它传送到服务端，然后服务端返回一个访问 url 地址，达到预览图片的功能。如今，随着标准不断的改善，JavaScript 里的 API 越来越多，我们可以通过直接读取本地文件的方式来加载我们想要看到的文本或者图片，一定程度上减少了服务端的压力。
Upload 组件参考文档：https://www.iviewui.com/components/upload
文档提供的参考代码：
<template> <div v-for="item in uploadList"> <template v-if="item.status === 'finished'">  <div> <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon> <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> </div> </template> <template v-else> <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress> </template> </div> <Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag" action="//jsonplaceholder.typicode.com/posts/"> <div> <Icon type="camera" size="20"></Icon> </div> </Upload> <Modal title="查看图片" v-model="visible">  </Modal> </template> <script> export default { data () { return { defaultList: [ { 'name': 'a42bdcc1178e62b4694c830f028db5c0', 'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar' }, { 'name': 'bc7521e033abdd1e92222d733590f104', 'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar' } ], imgName: '', visible: false, uploadList: [] } }, methods: { handleView (name) { this.imgName = name; this.visible = true; }, handleRemove (file) { // 从 upload 实例删除数据 const fileList = this.$refs.upload.fileList; this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); }, handleSuccess (res, file) { // 因为上传过程为实例，这里模拟添加 url file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar'; file.name = '7eb99afb9d5f317c912f08b5212fd69a'; }, handleFormatError (file) { this.$Notice.warning({ title: '文件格式不正确', desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。' }); }, handleMaxSize (file) { this.$Notice.warning({ title: '超出文件大小限制', desc: '文件 ' + file.name + ' 太大，不能超过 2M。' }); }, handleBeforeUpload () { const check = this.uploadList.length < 5; if (!check) { this.$Notice.warning({ title: '最多只能上传 5 张图片。' }); } return check; } }, mounted () { this.uploadList = this.$refs.upload.fileList; } } </script> <style> .demo-upload-list{ display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.2); margin-right: 4px; } .demo-upload-list img{ width: 100%; height: 100%; } .demo-upload-list-cover{ display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); } .demo-upload-list:hover .demo-upload-list-cover{ display: block; } .demo-upload-list-cover i{ color: #fff; font-size: 20px; cursor: pointer; margin: 0 2px; } </style>
自己实现手动上传：
<template> <div> <div v-for="item in uploadList">  <div> <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> </div> </div> <Upload ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action="//jsonplaceholder.typicode.com/posts/"> <div> <Icon type="camera" size="20"></Icon> </div> </Upload> </div> </template> <script> export default { methods: { data(){ return { uploadList: [] } }, handleBeforeUpload(file) { // 创建一个 FileReader 对象 let reader = new FileReader() // readAsDataURL 方法用于读取指定 Blob 或 File 的内容 // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据） // 读取文件作为 URL 可访问地址 reader.readAsDataURL(file) const _this = this reader.onloadend = function (e) { file.url = reader.result _this.uploadList.push(file) } }, handleRemove(file) { this.uploadList.splice(this.uploadList.indexOf(file), 1) }, handleFormatError(file) { this.$Notice.warning({ title: '文件格式不正确', desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。' }) }, handleMaxSize(file) { this.$Notice.warning({ title: '超出文件大小限制', desc: '文件 ' + file.name + ' 太大，不能超过 2M。' }) } } } </script> <style scoped> .demo-upload-list { display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, .2); margin-right: 4px; } .demo-upload-list img { width: 100%; height: 100%; } .demo-upload-list-cover { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .6); } .demo-upload-list:hover .demo-upload-list-cover { display: block; } .demo-upload-list-cover i { color: #fff; font-size: 20px; cursor: pointer; margin: 0 2px; } .ivu-icon { line-height: 58px; } </style>