sasp-admin 0.2.57

package/src/components/public/upload/plImage.vue

@@ -0,0 +1,287 @@
+<template>
+    <div class="avatar-uploader-container">
+        <p class="avater-uploader-title" v-if="!!title && !imageUrl">{{title}}</p>
+        <el-upload
+            class="avatar-uploader"
+            :action="actionUrl"
+            :accept="acceptFileType"
+            :disabled="isDisabled"
+            :show-file-list="false"
+            :http-request="onUpload" :style="imgStyls">
+            <img v-if="!!imageUrl" :src="imageUrl" :style="{'width':imgWidth+'px','height':imgHeight+'px'}" :onerror="defaultImg" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+    </div>
+</template>
+
+<script>
+    const operate = {
+        isLtSize(size, maxSize, unit){
+            const conversion = {
+                KB(size){
+                    return (size / 1024);
+                },
+                MB(size){
+                    return (size / 1024 / 1024);
+                },
+                GB(size){
+                    return (size / 1024 / 1024 / 1024)
+                }
+            };
+            const converSize = conversion[unit](size);
+            return converSize < maxSize;
+        },
+        async getImgInfo(vm){
+            const res = await vm.axios.post(vm.api.baseUploadUrl+'viewFile', {fkId: vm.fkid});
+            if(!res || !res.data || res.data.constructor !== Array || res.data.length <= 0) return [];
+            return res.data;
+        }
+    };
+
+    export default {
+        name: "plImage",
+        props: {
+            imgWidth: {
+                type: Number,
+                default: 80
+            },
+            imgHeight: {
+                type: Number,
+                default: 80
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            maxSize: {
+                type: Number,
+                default: 5
+            },
+            unit: {
+                type: String,
+                default: 'MB'
+            },
+            fkid: {
+                type: String,
+                required: true
+            },
+            isDisabled:{
+                type:Boolean,
+                default:false
+            },
+            plFileType: {// 逗号分隔的文件类型，.doc,.jpg。。
+                type: String,
+                default: ""
+            },
+            onUploadSuccess:{
+                type:Function,
+                default:null
+            },
+            beforeUploadMethod:{
+                type:Function,
+                default:null
+            }
+        },
+        data() {
+            return {
+                imageUrl: '',
+                actionUrl: this.api.upload.uploadFile,
+                defaultImg:'this.src="'+require('./images/emipty.png')+'"',
+                acceptFileType: "", // 允许上传的文件类型
+            };
+        },
+        computed: {
+            imgStyls(){
+                return {
+                    width: this.imgWidth+'px',
+                    height: this.imgHeight+'px'
+                }
+            }
+        },
+
+        watch:{
+            fkid(){
+                this.initImageData();
+            }
+        },
+
+        created(){
+            this.initImageData();
+        },
+        methods: {
+            initImageData(){
+                const vm = this;
+                vm.imageUrl =  '';
+                vm.acceptFileType = ""; // 允许上传的文件类型
+                vm.initSetting();
+
+                operate.getImgInfo(this).then(data => {
+                    if(data.length > 0){
+                        vm.imageUrl = vm.api.baseUploadUrl+'downloadFile?id='+data[0].id;
+                    }
+                });
+            },
+            initSetting(){
+                if(!this.plFileType || this.plFileType == 'all'){
+                    this.acceptFileType = ".jpg,.png,.gif";
+                }else if(this.plFileType.indexOf(".") != 0){
+                    this.acceptFileType = "." + this.plFileType;
+                }else{
+                    this.acceptFileType = this.plFileType;
+                }
+            },
+
+            beforeUpload(type, size, file) {
+                const vm = this;
+                if (this.acceptFileType) { // 判断上传类型
+                    let fileSuffix = file.name.substring(file.name.lastIndexOf("."), file.name.length);
+                    if (this.acceptFileType.indexOf(fileSuffix) == -1) {
+                        this.$message.error('不支持' + fileSuffix + '文件类型！');
+                        this.fileTypeValid = false;
+                        return false;
+                    }
+                }
+
+                const isLt = operate.isLtSize(size, vm.maxSize, vm.unit);
+
+                if (!isLt){
+                    vm.$message.error('上传图片大小不能超过 ' + vm.maxSize + vm.unit + '!');
+                    return false;
+                }
+
+                /*
+                    ** 删除之前上传的图片
+                    */
+                operate.getImgInfo(this).then(data => {
+                    if(data.length > 0){
+                        let ids = [];
+                        data.forEach(item => {
+                            ids.push(item.id)
+                        });
+                        vm.axios.defaults.headers={
+                            'Content-Type': 'application/x-www-form-urlencoded',
+                            common: {
+                                Authorization: (this.USER_GLOBAL.getLoginToken() || ""),
+                                a:1,
+                                b:2,
+                                abc:123
+                            }
+                        };
+                        vm.axios.post(vm.api.upload.deleteFilesById, {ids: ids.join(',')});
+                    }
+                });
+
+                return true;
+            },
+            onUpload(item){
+                const file = item.file;
+                const action = item.action;
+                const vm = this;
+                let value = this.beforeFileUpload(file);
+                if(!value){
+                    return;
+                }
+                if(this.beforeUpload(file.type, file.size,file)){
+                    //组装参数
+                    let formData = new FormData();
+                    formData.append('file', file);
+                    formData.append('fkId', vm.fkid);
+
+                    //创建axios实例
+                    vm.axios.defaults.headers=null;
+                    const axiosInstance = vm.axios.create({
+                        baseURL: vm.axios.defaults.baseURL,
+                        timeout: 60000,
+                        headers: {
+                            'Content-Type': 'multipart/form-data',
+                            Authorization: (this.USER_GLOBAL.getLoginToken() || "")
+                        },
+                        transformRequest: [
+                            function (data) {
+                                return data;
+                            }
+                        ],
+                        maxContentLength: 10000
+                    });
+
+                    //上传文件
+                    axiosInstance.post(action, formData).then((res) =>{
+                        vm.axios.defaults.headers={
+                            'Content-Type': 'application/x-www-form-urlencoded',
+                            common: {
+                                Authorization: (localStorage["Authorization" + (window.projectSuffix || "")] || ""),
+                                a:1,
+                                b:2,
+                                abc:123
+                            }
+                        };
+                        if(res&&res.data&&res.data.upload){
+                            // 上传成功回调
+                            vm.onUploadSuccess && vm.onUploadSuccess(file);
+                            this.imageUrl = this.api.baseUploadUrl + "downloadFile?id=" + res.data.upload.id;
+                        }
+                    }).catch(() => {
+                         vm.axios.defaults.headers={
+                            'Content-Type': 'application/x-www-form-urlencoded',
+                            common: {
+                                Authorization: (localStorage["Authorization" + (window.projectSuffix || "")] || ""),
+                                a:1,
+                                b:2,
+                                abc:123
+                            }
+                        };
+                        vm.$message.error('上传失败!');
+                    });
+                }
+            },
+            beforeFileUpload(file){
+                if(this.beforeUploadMethod){
+                    return this.beforeUploadMethod(file);
+                }
+                return true;
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .avatar-uploader-container{
+        display: inline-block;
+
+        .avater-uploader-title{
+            padding: 5px 0 2px 0;
+            text-align: center;
+        }
+
+        .avatar-uploader{
+            border: 1px dashed #d9d9d9;
+            border-radius: 6px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+
+            &:hover{
+                border-color: #409EFF;
+            }
+
+            .avatar {
+                display: block;
+            }
+
+            .avatar-uploader-icon {
+                font-size: 28px;
+                color: #8c939d;
+                width: 80px;
+                height: 80px;
+                line-height: 80px;
+                text-align: center;
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                margin: auto;
+            }
+        }
+    }
+</style>

package/src/components/public/upload/plImgUpload.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <el-upload
+      drag
+      :file-list="fileList"
+      :action="uploadUrl"
+      :disabled="isDisabled"
+      :before-remove="beforeRemove"
+      :before-upload="beforeUpload"
+      :on-success="onSuccess"
+      :on-preview="onPreview"
+      list-type="picture-card"
+      :http-request="uploadFileMethod"
+      multiple>
+      <i class="el-icon-plus"></i>
+    </el-upload>
+    <el-dialog :close-on-click-modal=false :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" :onerror="defaultImg">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "pl-img-upload",
+    props: ["fkId", "fkType"],
+    data() {
+      return {
+        isDisabled: false,
+        fileFkId: "",
+        defaultImg:'this.src="'+require('./images/emipty.png')+'"',
+        uploadUrl: "",
+        fileList: []
+      }
+    },
+
+    watch: {
+      fkId() {
+        this.initUpload();
+      },
+      fkType() {
+        this.initUpload();
+      }
+    },
+
+    created() {
+      this.initUpload();
+    },
+
+    methods: {
+        uploadFileMethod(item){ // 复写原来的上传方法，去除原生的OPTIONS预检请求，系统不支持OPTIONS请求
+            let vm = this;
+            let formData = new FormData();
+            formData.append("file",item.file);
+            formData.append("fkId",vm.fileFkId);
+            //创建axios实例
+            const axiosInstance = vm.axios.create({
+                baseURL: vm.uploadUrl,
+                timeout: 1000,
+                headers: {'Content-Type': 'multipart/form-data'},
+                transformRequest: [
+                    function (data) {
+                        return data;
+                    }
+                ],
+                maxContentLength: 10000
+            });
+            //上传文件
+            axiosInstance.post(vm.uploadUrl, formData);
+        },
+      initUpload() {
+        let vm = this;
+        vm.fileFkId = (vm.fkId || "") + "_" + (vm.fkType || "");
+        vm.isDisabled = false;
+        if (!vm.fkId) {
+          vm.$message("使用附件功能请传入fkId");
+          vm.isDisabled = true;
+          vm.fileList = [];
+          return;
+        }
+        vm.uploadUrl = vm.api.baseUploadUrl + "upload";
+        vm.initFiles();
+      },
+      onPreview(file) {
+        location.href = file.downloadUrl;
+      },
+      onSuccess() {
+        this.$message("附件上传成功");
+        this.initFiles();
+      },
+      initFiles() {
+        let vm = this;
+        vm.axios.post(vm.api.baseUploadUrl + "find?fkId=" + vm.fileFkId).then(function (response) {
+          let arrFile = response.data;
+          arrFile.forEach(function (file) {
+            file.downloadUrl = vm.api.baseUploadUrl + "downloadFile?id=" + file.id;
+            if (file.extension === "jpg" || file.extension === "jpeg" || file.extension === "png") {
+              file.url = file.downloadUrl;
+            }
+          });
+          vm.fileList = arrFile;
+        });
+      },
+      beforeUpload(file) {
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          this.$message.error('上传附件大小不能超过 2MB!');
+        }
+        return true;
+      },
+      beforeRemove(file) {
+        let vm = this;
+        vm.$confirm('是否确定删除此附件?', '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+        }).then(function () {
+          vm.axios.post(vm.api.baseUploadUrl + "delete", {"ids": file.id}).then(function () {
+            vm.$message("附件删除成功！");
+            vm.initFiles();
+          });
+        }).catch(function () {
+          vm.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+        return false;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .upload-info-message {
+    color: red;
+  }
+</style>