|
|
@@ -1,141 +1,189 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <van-uploader
|
|
|
- accept=""
|
|
|
- ref="uploader"
|
|
|
- v-bind="$attrs"
|
|
|
- v-model="fileList"
|
|
|
- :before-read="beforeRead"
|
|
|
- :after-read="afterRead"
|
|
|
- :max-count="maxCount"
|
|
|
- @delete="deleteHandler"
|
|
|
- :max-size="maxSize * 1024*1024"/>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <van-uploader
|
|
|
+ accept=""
|
|
|
+ ref="uploader"
|
|
|
+ v-bind="$attrs"
|
|
|
+ v-model="fileList"
|
|
|
+ :before-read="beforeRead"
|
|
|
+ :after-read="afterRead"
|
|
|
+ :max-count="maxCount"
|
|
|
+ :multiple="multiple"
|
|
|
+ @delete="deleteHandler"
|
|
|
+ :max-size="maxSize * 1024 * 1024"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import {upload} from "@/api/public";
|
|
|
-import ImageCompressor from "js-image-compressor";
|
|
|
-import config from '@/config/index';
|
|
|
+import { upload } from '@/api/public'
|
|
|
+import ImageCompressor from 'js-image-compressor'
|
|
|
+import config from '@/config/index'
|
|
|
export default {
|
|
|
- props:{
|
|
|
- value:{
|
|
|
- type: Array,
|
|
|
- },
|
|
|
- //最大上传数量
|
|
|
- maxCount:{
|
|
|
- type: Number,
|
|
|
- default: 6,
|
|
|
- },
|
|
|
- //文件大小,单位MB
|
|
|
- maxSize:{
|
|
|
- type: Number,
|
|
|
- default: 5,
|
|
|
- },
|
|
|
-
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: Array
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- fileList:[],
|
|
|
- //上传之后的图片列表,双向绑定之后覆盖fileList
|
|
|
- imageList:[]
|
|
|
- };
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
},
|
|
|
-
|
|
|
- mounted() {
|
|
|
-
|
|
|
+ //最大上传数量
|
|
|
+ maxCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 6
|
|
|
},
|
|
|
- watch:{
|
|
|
- value:{
|
|
|
- handler(val){
|
|
|
- console.log(val,'sssssss');
|
|
|
- this.imageList= this.fileList = val.map(v=>{
|
|
|
+ //文件大小,单位MB
|
|
|
+ maxSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList: [],
|
|
|
+ //上传之后的图片列表,双向绑定之后覆盖fileList
|
|
|
+ imageList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- let imgUrl =
|
|
|
- process.env.NODE_ENV === "development"
|
|
|
- ? '/dev' + v.path
|
|
|
- : window.origin + v.path;
|
|
|
- console.log(imgUrl);
|
|
|
- return {
|
|
|
- name: v.name,
|
|
|
- url: imgUrl,
|
|
|
- path:v.path,
|
|
|
+ mounted() {},
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ handler(val) {
|
|
|
+ this.imageList = this.fileList = val.map(v => {
|
|
|
+ let imgUrl = process.env.NODE_ENV === 'development' ? '/dev' + v.path : window.origin + v.path
|
|
|
+ console.log(imgUrl)
|
|
|
+ return {
|
|
|
+ name: v.name,
|
|
|
+ url: imgUrl,
|
|
|
+ path: v.path
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //上传前压缩
|
|
|
+ beforeRead(file) {
|
|
|
+ console.log(file, '图片压缩前')
|
|
|
+ //当前是多文件的时候
|
|
|
+ if (file.length > 1) {
|
|
|
+ let list = []
|
|
|
+ for (let index = 0; index < file.length; index++) {
|
|
|
+ const element = file[index]
|
|
|
+ list.push(
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ new ImageCompressor({
|
|
|
+ file: element,
|
|
|
+ quality: 0.6,
|
|
|
+ success: result => {
|
|
|
+ console.log(result, '图片压缩后')
|
|
|
+ let imgFile = new File([result], result.name, {
|
|
|
+ width: result.width,
|
|
|
+ height: result.height,
|
|
|
+ type: result.type
|
|
|
+ })
|
|
|
+ console.log(imgFile, '后')
|
|
|
+ resolve(imgFile)
|
|
|
+ },
|
|
|
+ error: e => {
|
|
|
+ this.$toast(e)
|
|
|
+ reject(e)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ )
|
|
|
+ return list
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ new ImageCompressor({
|
|
|
+ file,
|
|
|
+ quality: 0.6,
|
|
|
+ success: result => {
|
|
|
+ console.log(result, '图片压缩后')
|
|
|
+ let imgFile = new File([result], result.name, {
|
|
|
+ width: result.width,
|
|
|
+ height: result.height,
|
|
|
+ type: result.type
|
|
|
+ })
|
|
|
+ console.log(imgFile, '后')
|
|
|
+ resolve(imgFile)
|
|
|
+ },
|
|
|
+ error: e => {
|
|
|
+ this.$toast(e)
|
|
|
+ reject(e)
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
- },
|
|
|
- deep:true,
|
|
|
- immediate:true
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- //上传前压缩
|
|
|
- beforeRead(file){
|
|
|
- console.log(file,'图片压缩前')
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- new ImageCompressor({
|
|
|
- file,
|
|
|
- quality: 0.6,
|
|
|
- success: (result) => {
|
|
|
- //this.$toast('图片压缩成功')
|
|
|
- console.log(result,'图片压缩后')
|
|
|
- let imgFile = new File([result], result.name, {
|
|
|
- width: result.width,
|
|
|
- height: result.height,
|
|
|
- type: result.type,
|
|
|
- });
|
|
|
- console.log(imgFile,'后')
|
|
|
- resolve(imgFile);
|
|
|
- },
|
|
|
- error: (e) => {
|
|
|
-
|
|
|
- this.$toast(e)
|
|
|
- reject(e);
|
|
|
- },
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- //上传到服务器
|
|
|
- afterRead(fileObj){
|
|
|
- let formData = new FormData();
|
|
|
- formData.append("file", fileObj.file);
|
|
|
- upload(formData, "image").then((res) => {
|
|
|
- /*上传成功*/
|
|
|
- let imgUrl =
|
|
|
- process.env.NODE_ENV === "development"
|
|
|
- ? config.baseUrl + res.data.url
|
|
|
- : window.origin + res.data.url;
|
|
|
+ //上传到服务器
|
|
|
+ afterRead(fileObj) {
|
|
|
+ console.log(fileObj)
|
|
|
+ //多文件上传
|
|
|
+ if (this.multiple) {
|
|
|
+ for (let index = 0; index < fileObj.length; index++) {
|
|
|
+ const element = fileObj[index]
|
|
|
+ let formData = new FormData()
|
|
|
+ formData.append('file', element.file)
|
|
|
+ upload(formData, 'image')
|
|
|
+ .then(res => {
|
|
|
+ /*上传成功*/
|
|
|
+ let imgUrl =
|
|
|
+ process.env.NODE_ENV === 'development' ? config.baseUrl + res.data.url : window.origin + res.data.url
|
|
|
|
|
|
- this.imageList.push({ name: res.data.name, url: imgUrl,path:res.data.url});
|
|
|
- this.$emit('input',this.imageList)
|
|
|
+ this.imageList.push({ name: res.data.name, url: imgUrl, path: res.data.url })
|
|
|
+ this.$emit('input', this.imageList)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ /*上传失败*/
|
|
|
|
|
|
- }).catch((err) => {
|
|
|
- /*上传失败*/
|
|
|
-
|
|
|
- this.$toast.fail('上传失败')
|
|
|
- });
|
|
|
- },
|
|
|
- //删除
|
|
|
- deleteHandler(){
|
|
|
- let imageList=JSON.parse(JSON.stringify(this.fileList))
|
|
|
- imageList.forEach(item=>{
|
|
|
- item.imgPath=item.path
|
|
|
- item.path=item.imgPath
|
|
|
+ this.$toast.fail('上传失败')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let formData = new FormData()
|
|
|
+ formData.append('file', fileObj.file)
|
|
|
+ upload(formData, 'image')
|
|
|
+ .then(res => {
|
|
|
+ /*上传成功*/
|
|
|
+ let imgUrl =
|
|
|
+ process.env.NODE_ENV === 'development' ? config.baseUrl + res.data.url : window.origin + res.data.url
|
|
|
|
|
|
- })
|
|
|
+ this.imageList.push({ name: res.data.name, url: imgUrl, path: res.data.url })
|
|
|
+ this.$emit('input', this.imageList)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ /*上传失败*/
|
|
|
|
|
|
- this.$emit('input',imageList)
|
|
|
+ this.$toast.fail('上传失败')
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
- model:{
|
|
|
- prop:'value',
|
|
|
- event:'input'
|
|
|
+ //删除
|
|
|
+ deleteHandler() {
|
|
|
+ let imageList = JSON.parse(JSON.stringify(this.fileList))
|
|
|
+ imageList.forEach(item => {
|
|
|
+ item.imgPath = item.path
|
|
|
+ item.path = item.imgPath
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$emit('input', imageList)
|
|
|
}
|
|
|
-};
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: 'value',
|
|
|
+ event: 'input'
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .upload-text{
|
|
|
- font-size: 18px;
|
|
|
- color: #999;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
+.upload-text {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
</style>
|