| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
步骤
- 安装依赖包
npm install --save lrz
- 在
main.js里引入 import lrz from 'lrz'
- 封装
compress函数
- 封装上传组件
upload-image
- 在 vue 文件中 使用
封装 compress函数
// eslint-disable
/** @format */
// base64编码转File
export function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
// main function.
export function compress(file, fileList, that, reference) {
if (file.status != 'ready') {
return;
}
let index = reference.uploadFiles.indexOf(file);
// jpg/jpeg/bmp/gif/png
let isJPG =
file.raw.type === 'image/jpg' ||
file.raw.type === 'image/jpeg' ||
file.raw.type === 'image/png' ||
file.raw.type === 'image/gif' ||
file.raw.type === 'image/bmp'
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isJPG) {
that.$message.error('不支持的格式,请上传jpg/jpeg/bmp/gif/png格式的图片!');
fileList.splice(fileList.indexOf(file), 1);
return;
}
if (!isLt20M) {
that.$message.error('上传图片大小不能超过 20MB!');
fileList.splice(fileList.indexOf(file), 1);
return;
}
if (isJPG & isLt20M) {
if (isLt2M(file)) {
// pdf不压缩
submit(reference, file);
} else {
let options = {};
lrz(file.raw, options)
.then(rst => {
let tempFile = dataURLtoFile(rst.base64, rst.origin.name);
tempFile.uid = rst.origin.uid;
reference.uploadFiles[index].raw = tempFile;
reference.uploadFiles[index].size = rst.fileLen;
})
.catch(function (error) {
// 失败时执行
if (error) {
// IE报错
if (error.name == 'TypeError' && error.message == '对象不支持此操作') {
that.$message.error('当前浏览器不支持上传大于2M的文件,请更换浏览器!');
}
// 图片格式问题
else if ((error + '').indexOf('加载图片文件失败') > -1) {
that.$message.error('系统未能识别当前上传图片,请更换!');
}
}
fileList.splice(fileList.indexOf(file), 1);
})
.always(function () {
//不管成功或失败都会执行
submit(reference, file);
});
}
}
}
// 判断文件大小是否小于2M
function isLt2M(file) {
if (file.raw.type === 'application/pdf') {
return true;
} else {
return file.size / 1024 / 1024 < 2;
}
}
function submit(reference, file) {
let submitFlag = true;
if (reference.multiple) {
for (let item of reference.uploadFiles) {
if (item.status != 'ready') {
continue;
}
if (!isLt2M(item)) {
submitFlag = false;
break;
} else {
submitFlag = true;
}
}
} else {
if (!isLt2M(file)) {
submitFlag = false;
} else {
submitFlag = true;
}
}
if (submitFlag) {
reference.submit();
return;
}
}
封装上传组件upload-image
<template>
<div class="upload-component-container">
<div class="upload-section">
<!-- 上传主体 -->
<el-row>
<el-upload
ref="imageUploadRef"
:headers="token"
:action="uploadUrl"
:auto-upload="false"
list-type="picture-card"
:file-list="imageList"
:on-change="resize"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-error="handleError"
:on-exceed="handleExceed"
:on-progress="handleProgress"
:class="imageList.length >= maxCount ? 'uploaded-none':''"
:limit="maxCount"
>
<div class="icon-container" v-loading="loading">
<i class="el-icon-plus upload-icon"></i>
</div>
</el-upload>
</el-row>
<!-- 上传描述 -->
<el-row v-if="needDesc">
<div class="upload-text-desc" :style="descStyle">{{uploadDesc}}</div>
</el-row>
</div>
<!-- 查看图片 -->
<el-dialog
width="50%"
:modal="modal"
@close="imageVisible=false"
:modal-append-to-body="false"
:visible.sync="imageVisible"
>
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
import { getBaseUrl, uuid as getUUId } from '@/utils/basic/' // 引入项目的api前缀
import { getToken } from '@/utils/browser' // 引入token
import { compress } from '@/utils/image/compress' // 引入上一步封装的压缩函数
import lodash from 'lodash'
export default {
name: 'UploadImage',
props: {
modal: { type: Boolean, default: () => { false } },
maxCount: { type: Number, required: true },
uploadDesc: { type: String },
initShowImages: { type: [Array, String], required: true },
singleFile: { type: Boolean, default: false },
needDesc: { type: Boolean, default: true },
handleChange: { type: Function, required: true },
descStyle: { type: Object, default: () => { null } }
},
data() {
return {
uploadUrl: getBaseUrl() + '/api/base/uploadImg',
token: { Authorization: getToken(), 'X-Trace-ID': getUUId() },
imageList: [],
loading: false,
imageVisible: false,
dialogImageUrl: ''
}
},
methods: {
// 启用压缩
resize(file, fileList) {
compress(file, fileList, this, this.$refs.imageUploadRef)
},
// 上传成功
handleSuccess(res, f, fList) {
if (res.status === 1 && res.result.length > 0) {
if (res.result[0].url) {
this.imageList.push({
url: res.result[0].url,
// 兼容saas的初始 attachmentUrl 属性
attachmentUrl: res.result[0].url //
})
} else {
this.imageList.push({
url: fList[0].url,
// 兼容saas的初始 attachmentUrl 属性
attachmentUrl: fList[0].url //
})
}
}
// 根据接收类型将结果发送到父组件
if (this.singleFile == true) {
this.handleChange(this.imageList[0].url)
} else {
this.handleChange(this.imageList)
}
this.loading = false
},
// 删除事件
handleRemove(res) {
this.imageList = lodash.filter(this.imageList, item => {
if (res.response) {
return item.url !== res.response.result[0].url
} else {
return item.url !== res.url
}
})
// 根据接收类型将结果发送到父组件 => 单个文件
if (this.singleFile == true) {
this.handleChange('')
} else {
this.handleChange(this.imageList)
}
this.$forceUpdate()
},
// 最大数
handleExceed() {
this.$message({ type: 'warning', message: `最多上传${this.maxCount}张图片` })
},
// 上传错误
handleError(err, file, fileList) {
this.$message({ message: err.data.msg, type: 'error' })
},
// 查看图片
handlePreview(file) {
this.dialogImageUrl = file.url
this.imageVisible = true
},
handleProgress() {
this.loading = true
}
},
mounted() {
// case: string(logo)
if (this.singleFile == true) {
// 非空值
if (this.initShowImages) {
this.imageList.push({ url: this.initShowImages })
} else {
this.imageList = []
}
} else {
// 列表文件
this.imageList = this.initShowImages
}
},
watch: {
initShowImages(val) {
// case: string(logo)
if (this.singleFile == true) {
// 非空值
if (val) {
this.imageList = [{ url: val }]
} else {
this.imageList = []
}
} else {
// 列表文件
this.imageList = val
}
}
}
}
</script>
<style lang="scss">
.upload-component-container {
.upload-section {
background: #ffffff;
border-radius: 4px;
padding-top: 2px;
.uploaded-none {
.el-upload--picture-card {
display: none;
}
}
.el-upload-list--picture-card .el-upload-list__item {
width: 60px;
height: 60px;
}
.el-upload--picture-card {
width: 60px;
height: 60px;
line-height: 125px;
i {
font-size: 20px !important;
}
}
.icon-container {
line-height: 2.5em;
padding-top: 12px;
}
.el-icon-plus:before {
// background: rgb(77, 227, 193);
color: #000;
border-radius: 12px;
}
}
.upload-text-desc {
font-size: 12px;
color: #939393;
margin-top: 4px;
margin-bottom: 5px;
}
}
</style>
在 vue 文件中使用
<template>
<div class="contract-other-edit-container">
<el-row>
<el-col :span="12">
<upload-image
:modal="false"
:maxCount="5"
uploadDesc="格式要求：支持jpg/jpeg/bmp/gif/png格式图片，大小不超过20MB,多上传5张图片."
:handleChange="handleUploadImage"
:initShowImages="imageList"
/>
</el-col>
</el-row>
</div>
</template>
<script>
import UploadImage from '@/components/element-ui/upload/image' // 组件的位置
export default {
name: 'other-edit',
components: { UploadImage },
data() {
return {
imageList: []
}
},
methods: {
handleUploadImage(files) {
this.imageList = files
}
}
}
</script>
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |