123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <!--
- <div>
- 带压缩的上传
- <upload-image v-model="imageUrl" :fileSize="512" />
- 已上传文件 {{ imageUrl }}
- </div>
- -->
- <template>
- <div>
- <el-upload
- class="image-uploader"
- :action="`${path}/fileUploadAndDownload/upload`"
- :show-file-list="false"
- :on-success="handleImageSuccess"
- :before-upload="beforeImageUpload"
- :multiple="false"
- >
- <img v-if="imageUrl" :src="imageUrl" class="image" />
- <i v-else class="el-icon-plus image-uploader-icon"></i>
- </el-upload>
- </div>
- </template>
- <script>
- const path = process.env.VUE_APP_BASE_API;
- import ImageCompress from "@/utils/image.js";
- export default {
- name: "upload-image",
- model: {
- prop: "imageUrl",
- event: "change",
- },
- props: {
- imageUrl: {
- type: String,
- default: "",
- },
- fileSize: {
- type: Number,
- default: 2048, // 2M 超出后执行压缩
- },
- maxWH: {
- type: Number,
- default: 1920, // 图片长宽上限
- },
- },
- data() {
- return {
- path: path,
- };
- },
- methods: {
- beforeImageUpload(file) {
- let isRightSize = file.size / 1024 < this.fileSize;
- if (!isRightSize) {
- // 压缩
- let compress = new ImageCompress(file, this.fileSize, this.maxWH);
- return compress.compress();
- }
- return isRightSize;
- },
- handleImageSuccess(res) {
- // this.imageUrl = URL.createObjectURL(file.raw);
- const { data } = res;
- if (data.file) {
- this.$emit("change", data.file.url);
- }
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .image-uploader {
- border: 1px dashed #d9d9d9;
- width: 180px;
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- }
- .image-uploader {
- border-color: #409eff;
- }
- .image-uploader-icon {
- font-size: 28px;
- color: #8c939d;
- width: 178px;
- height: 178px;
- line-height: 178px;
- text-align: center;
- }
- .image {
- width: 178px;
- height: 178px;
- display: block;
- }
- </style>
|