<img
v-if="file.blob"
:src="file.blob"
/>
<div class="uploading-shade">
<p>{{ file.progress }} %</p>
<p>正在上传</p>
</div>
<div class="error-shade">
<p>上传失败！</p>
</div>
<van-icon
name="clear"
class="close"
@click="remove(index)"
/>
</div>
<file-upload
ref="uploader"
v-model="files"
multiple
:thread="10"
extensions="jpg,gif,png,webp"
post-action="http://localhost:3000/file/upload"
@input-file="inputFile"
@input-filter="inputFilter"
>
<van-icon name="photo"/>
</file-upload>
</div>
</template>
<script>
/**
* 图片上传控件
* 使用方法：
import ImageUpload from '@/components/ImageUpload'
...
components: {
ImageUpload
},
...
<image-upload :value.sync="pics"/>
*/
import uploader from 'vue-upload-component'
import ImageCompressor from 'image-compressor.js';
import { ImagePreview } from 'vant';
export default {
name: 'ImageUpload',
props: {
value: Array // 通过`.sync`来添加更新值的语法题，通过 this.$emit('update:value', this.value) 来更新
},
data() {
return {
files: [] // 存放在组件的file对象
}
},
components: {
'file-upload': uploader
},
methods: {
// 当 add, update, remove File 这些事件的时候会触发
inputFile(newFile, oldFile) {
// 上传完成
if (newFile && oldFile && !newFile.active && oldFile.active) {
// 获得相应数据
if (newFile.xhr && newFile.xhr.status === 200) {
newFile.response.data.thumb = newFile.thumb // 把缩略图转移
this.value.push(newFile.response.data) // 把 uploader 里的文件赋值给 value
this.$refs.uploader.remove(newFile) // 删除当前文件对象
this.$emit('update:value', this.value) // 更新值
}
}
// 自动上传
if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
if (!this.$refs.uploader.active) {
this.$refs.uploader.active = true
}
}
},
// 文件过滤，可以通过 prevent 来阻止上传
inputFilter(newFile, oldFile, prevent) {
if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
// 自动压缩
if (newFile.file && newFile.type.substr(0, 6) === 'image/') { // && this.autoCompress > 0 && this.autoCompress < newFile.size（小于一定尺寸就不压缩）
newFile.error = 'compressing'
// 压缩图片
const imageCompressor = new ImageCompressor(null, {
quality: .5,
convertSize: Infinity,
maxWidth: 1000,
