单文件上传优化

components/page/newInputFile.vue

+<template>
+  <div>
+    <Input v-model="newName" placeholder="请选择上传文件" v-if="inputShow">
+      <Button
+        v-if="view"
+        icon="ios-eye"
+        slot="prepend"
+        @click="downFile(newName)"
+      >
+      </Button>
+      <Button
+        type="primary"
+        icon="ios-cloud-upload-outline"
+        slot="append"
+        @click="handler"
+        >上传</Button
+      >
+    </Input>
+    <Button
+      v-else
+      type="primary"
+      icon="ios-cloud-upload-outline"
+      slot="append"
+      @click="handler"
+      >上传</Button
+    >
+    <Upload
+      v-model="name"
+      :action="postUrl"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :format="formatList"
+      :max-size="maxSize"
+      :on-exceeded-size="onExceededSize"
+      :on-format-error="onFormatError"
+      :show-upload-list="false"
+      :on-progress="onProgress"
+    >
+      <Button v-show="1 == 2" type="primary" ref="upload">上传</Button>
+    </Upload>
+
+    <Progress :percent="per" :stroke-width="5" v-show="vshowPro" />
+  </div>
+</template>
+<script>
+import util from "@/libs/util";
+export default {
+  name: "inputFile",
+  model: {
+    prop: "value",
+    event: "on-change",
+  },
+  data() {
+    return {
+      inputShow: true, //隐藏input
+      file: null,
+      name: this.value,
+      downUrl: fileUrlDown,
+      fileUrlPath: "",
+      nameList: [],
+      postUrl:
+        fileUrl +
+        "/upload/?token=Bearer " +
+        util.cookies.get("token") +
+        "&" +
+        this.parms,
+      formatList: ["png", "jpg", "gif"],
+      newName: this.value,
+      newPath: "",
+      per: 0,
+      vshowPro: false,
+    };
+  },
+  created() {},
+  props: {
+    value: [String, Number, Array, Object],
+    maxSize: {
+      type: Number,
+      default: 10240,
+    },
+    files: {
+      type: Boolean,
+      default: false,
+    },
+    parms: {
+      type: String,
+      default: "",
+    },
+    showButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    onProgress(event, file, fileList) {
+      this.per = 0;
+      this.vshowPro = true;
+    },
+    handler() {
+      this.$refs.upload.$el.click();
+    },
+    //  change(event) {
+    //  this.$emit('on-change', event.target.value)
+    // },
+    //上传成功文件
+    uploadSuccess(response, file, fileList) {
+      this.per = 60;
+      this.vshowPro = true;
+      const hbaseFileList = [];
+      const filesList = [];
+      if (file.response.status == 0) {
+        let objImag = {};
+        objImag.fileName = file.response.data.fileName;
+        // console.warn("res", response);
+        this.newName = response.data.downloadPath;
+        console.warn(this.newName);
+        this.$emit("on-change", this.newName);
+        this.per = 100;
+        setTimeout(() => {
+          this.per = 0;
+          this.vshowPro = false;
+        }, 2000);
+      } else {
+        this.$Message.error("上传失败，请重新上传!");
+      }
+    },
+    //上传文件失败
+    uploadError(response, file, fileList) {
+      this.$Message.error("上传失败，请重新上传!");
+    },
+    //文件大小验证返回
+    onExceededSize(file, fileList) {
+      if (Object.keys(file).length == 0) {
+        this.$Message.error(
+          "上传文件不能大于" + this.maxSize + "k，请重新上传!"
+        );
+      }
+    },
+    //文件格式验证
+    onFormatError(file, fileList) {
+      if (Object.keys(file).length == 0) {
+        this.$Message.error("上传文件格式不正确，请重新上传!");
+      }
+    },
+    formatL() {
+      if (this.files) {
+        this.formatList = [
+          "pdf",
+          "docx",
+          "doc",
+          "xls",
+          "xlsx",
+          "txt",
+          "png",
+          "jpg",
+          "gif",
+          "zip",
+          "rar",
+        ];
+      }
+      return this.formatList;
+    },
+    downFile(path) {
+      let truePath = path.trim();
+      if (truePath.length > 2) {
+        if (
+          truePath.substring(0, 7).toLowerCase() == "http://" ||
+          truePath.substring(0, 8).toLowerCase() == "https://"
+        ) {
+          window.open(truePath, "_blank");
+        } else {
+          this.fileUrlPath = this.downUrl + path;
+          window.open(this.fileUrlPath, "_blank");
+        }
+      }
+    },
+  },
+  mounted() {
+    this.formatL();
+  },
+  computed: {
+    nativeInputValue() {
+      return this.value === null || this.value === undefined ? "" : this.value;
+    },
+    view() {
+      return true;
+    },
+  },
+  watch: {
+    value(v) {
+      this.newName = v;
+    },
+  },
+};
+</script>
+<style lang="less">
+</style>
\ No newline at end of file

i18n/locale/zh-CN.js

@@ -1753,7 +1753,7 @@ export default {
     status:'状态',
     creator:'创建人',
     remark:'备注',
-    url:'上传模板',
+    url:'模板',
     },
     document_ref:{
       creationTime:'创建时间',

pages/word/template/add.vue

@@ -57,10 +57,10 @@
       </Col>-->
       <Col :span="12">
         <FormItem :label="l('url')" prop="url">
-          <inputFile
+          <NewInputFile
             class="tphoto"
             ref="refmovieFile1"
-            v-model="imgName"
+            v-model="entity.url"
             :parms="parmsName"
             files
           />
@@ -85,7 +85,6 @@ export default {
   name: "Add",
   data() {
     return {
-      imgName: "",
       entity: {
         creatorUserId: this.$store.state.userInfo.userId,
         name: "",
@@ -134,13 +133,6 @@ export default {
       return this.$t(key);
     },
   },
-  watch: {
-    imgName(newName, oldName) {
-      if (newName != "") {
-        const imgPathsArr = JSON.parse(newName);
-        this.entity.url = imgPathsArr[0].filePath;
-      }
-    },
-  },
+  watch: {},
 };
 </script>
\ No newline at end of file

pages/word/template/edit.vue

@@ -56,12 +56,11 @@
         </FormItem>
       </Col>-->
       <Col :span="12">
-      {{imgName}}
         <FormItem :label="l('url')" prop="url">
-          <inputFile
+          <NewInputFile
             class="tphoto"
             ref="refmovieFile1"
-            v-model="imgName"
+            v-model="entity.url"
             :parms="parmsName"
             files
           />
@@ -85,7 +84,6 @@ export default {
   name: "Edit",
   data() {
     return {
-      imgName: "",
       entity: {},
       rules: {
         name: [{ required: true, message: "必填", trigger: "blur" }],
@@ -105,8 +103,7 @@ export default {
     load(v) {
       Api.get({ id: v }).then((r) => {
         this.entity = r.result;
-        this.entity.url = r.result.url;
-        this.imgName = r.result.url;
+      
       });
     },
     handleSubmit() {
@@ -137,12 +134,6 @@ export default {
     },
   },
   watch: {
-    imgName(newName, oldName) {
-      if (newName != "") {
-        const imgPathsArr = JSON.parse(newName);
-        this.entity.url = imgPathsArr[0].filePath;
-      }
-    },
     eid(v) {
       if (v != 0) {
         this.load(v);

plugins/iview.js

@@ -46,6 +46,7 @@ import radioButton from '@/components/page/radioButton.vue'
 import InputIcon from '@/components/page/inputIcon.vue'
 import checkBoxButton from '@/components/page/checkBoxButton.vue'
 import InputFile from '@/components/page/inputFile.vue'
+import NewInputFile from '@/components/page/newInputFile.vue'
 import imgUploadFile from '@/components/page/imgUploadFile.vue'
 import files from '@/components/page/files.vue'
 import FilesList from '@/components/page/filesList.vue'
@@ -100,6 +101,7 @@ Vue.component("Dictionary", Dictionary)
 Vue.component("radioButton", radioButton)
 Vue.component("checkBoxButton", checkBoxButton)
 Vue.component("InputFile", InputFile)
+Vue.component("NewInputFile", NewInputFile)
 Vue.component("imgUploadFile", imgUploadFile)
 Vue.component("InputIcon", InputIcon)
 Vue.component("files", files)