|
|
@@ -1,128 +1,138 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <van-uploader
|
|
|
- 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
|
|
|
+ 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>
|
|
|
</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
|
|
|
+ props:{
|
|
|
+ value:{
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ //最大上传数量
|
|
|
+ maxCount:{
|
|
|
+ type: Number,
|
|
|
+ default: 6,
|
|
|
+ },
|
|
|
+ //文件大小，单位MB
|
|
|
+ maxSize:{
|
|
|
+ type: Number,
|
|
|
+ default: 5,
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
- //最大上传数量
|
|
|
- maxCount: {
|
|
|
- type: Number,
|
|
|
- default: 6
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList:[],
|
|
|
+ //上传之后的图片列表，双向绑定之后覆盖fileList
|
|
|
+ imageList:[]
|
|
|
+ };
|
|
|
},
|
|
|
- //文件大小，单位MB
|
|
|
- maxSize: {
|
|
|
- type: Number,
|
|
|
- default: 5
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- fileList: [],
|
|
|
- //上传之后的图片列表，双向绑定之后覆盖fileList
|
|
|
- imageList: []
|
|
|
- }
|
|
|
- },
|
|
|
|
|
|
- mounted() {},
|
|
|
- watch: {
|
|
|
- value: {
|
|
|
- handler(val) {
|
|
|
- this.fileList = val.map(v => {
|
|
|
- console.log(window.origin, ' window.origin ')
|
|
|
- let imgUrl = process.env.NODE_ENV === 'development' ? config.baseUrl + v.imgPath : window.origin + v.imgPath
|
|
|
- return {
|
|
|
- name: v.name,
|
|
|
- url: imgUrl,
|
|
|
- path: v.imgPath
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- 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 => {
|
|
|
- console.log('imageError:' + e)
|
|
|
- this.$toast('图片压缩失败')
|
|
|
- reject(e)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
+ mounted() {
|
|
|
+
|
|
|
},
|
|
|
- //上传到服务器
|
|
|
- afterRead(fileObj) {
|
|
|
- let formData = new FormData()
|
|
|
- formData.append('file', fileObj.file)
|
|
|
- upload(formData, 'image')
|
|
|
- .then(res => {
|
|
|
+ watch:{
|
|
|
+ value:{
|
|
|
+ handler(val){
|
|
|
+ this.imageList= this.fileList = val.map(v=>{
|
|
|
+
|
|
|
+ let imgUrl =
|
|
|
+ process.env.NODE_ENV === "development"
|
|
|
+ ? config.baseUrl + v.imgPath||v.path
|
|
|
+ : window.origin + v.imgPath||v.path;
|
|
|
+ return {
|
|
|
+ name: v.name,
|
|
|
+ url: imgUrl,
|
|
|
+ path:v.imgPath||v.path,
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ 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) => {
|
|
|
+ console.log('imageError:'+e);
|
|
|
+ this.$toast('图片压缩失败')
|
|
|
+ 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
|
|
|
- this.deleteHandler()
|
|
|
- // this.$emit("input",this.imageList);
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
+ 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) => {
|
|
|
/*上传失败*/
|
|
|
- console.log(this.fileList, 'this.fileList')
|
|
|
+
|
|
|
this.$toast.fail('上传失败')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ deleteHandler(){
|
|
|
+ let imageList=JSON.parse(JSON.stringify(this.fileList))
|
|
|
+ imageList.forEach(item=>{
|
|
|
+ item.imgPath=item.path
|
|
|
+ item.path=item.imgPath
|
|
|
+
|
|
|
})
|
|
|
+
|
|
|
+ this.$emit('input',imageList)
|
|
|
+ }
|
|
|
},
|
|
|
- //删除
|
|
|
- deleteHandler() {
|
|
|
- this.imageList = this.fileList
|
|
|
- this.imageList.forEach(item => {
|
|
|
- item.imgPath = item.path
|
|
|
- delete item.path
|
|
|
- })
|
|
|
- this.$emit('input',this.imageList)
|
|
|
+ model:{
|
|
|
+ prop:'value',
|
|
|
+ event:'input'
|
|
|
}
|
|
|
- },
|
|
|
- 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>
|
coys