上传文件

songhuangfeng123

2022-03-29 df5ab30d3931c5492863092862bd29de812d4d9d

上传文件

 src/api/emergencyplan.js

@@ -44,3 +44,14 @@
      data
    });
  }

export function emergencyPlanUpload(data) {
    return request({
        headers:{
            'Authorization': getToken()
        },
        url: process.env.BASE_API+'/emergencyPlan/upload',
        method: 'post',
        data
    });
}

 src/views/contingencyplan/index.vue

@@ -56,22 +56,22 @@
      :total="recordTotal"
    >
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="预案名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-radio-group v-model="form.fileType">
            <el-radio label="0">图片</el-radio>
            <el-radio label="1">文件</el-radio>
            <el-radio :label=0 >图片</el-radio>
            <el-radio :label=1 >文件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.fileType==0" label="图片上传">
          <el-input ></el-input>
            <upload-img  v-bind:imgList="form.fileList" @uploadImgSuccess="uploadImgSuccess" @removeImgSuccess="removeImgSuccess"></upload-img>
        </el-form-item>
        <el-form-item label="文件链接" v-if="form.fileType==1">
          <SingleImageUpload></SingleImageUpload>
            <upload-file v-bind:url="fileUrl" v-bind:name="fileName" @uploadFileSuccess="uploadFileSuccess" ></upload-file>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" :rows="5" type="textarea"></el-input>
@@ -85,7 +85,8 @@
  </div>
</template>
<script>
import SingleImageUpload from "@/components/Upload/singleImage.vue";
import uploadImg from "@/views/contingencyplan/uploadImg.vue";
import uploadFile from "@/views/contingencyplan/uploadFile.vue";
import {
  emergencyPlanList,
  emergencyPlanAdd,
@@ -93,9 +94,13 @@
  emergencyPlanDel,
} from "@/api/emergencyplan.js";
export default {
  components: { SingleImageUpload },
  components: { uploadImg , uploadFile},
  data() {
    return {
        name:"111",
        url:"222",
        path:"emergencyPlan",

      dialogVisible: false,
      title: "",
      pageSize: 10,
@@ -104,7 +109,7 @@
      form: {
        name: "",
        fileType: 0,
        fileList: [{ fileName: "", fileUrl: "" }],
        fileList: [],
        remark: "",
      },
      listQuery: {
@@ -114,6 +119,8 @@
          name: "",
        },
      },
        fileName:"",
        fileUrl:"",
      list: [],
      rules: {
        name: [
@@ -129,9 +136,33 @@
    this.emergencyPlan();
  },
  methods: {

      uploadFileSuccess(res){
          this.fileName=res.fileName
          this.fileUrl=res.fileUrl
          if (this.fileName=="" || this.fileUrl==""){
              this.form.fileList=[]
          }
          this.form.fileList=[{
              fileName: this.fileName,
              fileUrl:this.fileUrl
          }]
      },

      uploadImgSuccess(res){
          let file = {
              fileUrl : res.fileUrl,
              fileName : res.fileName
          }
          this.form.fileList.push(file)
      },

      removeImgSuccess(res){
          this.form.fileList=res.fileList
      },

    async emergencyPlan() {
      var res = await emergencyPlanList(this.listQuery);
      console.log(res);
      if (res.data.code === "200") {
        this.list = res.data.result.records;
        this.recordTotal = res.data.result.total
@@ -148,18 +179,21 @@
        this.title = "新增";
        this.form = {
          name: "",
          fileType: "0",
          fileList: [{ fileName: "", fileUrl: "" }],
          fileType: 0,
          fileList: [],
          remark: "",
        };
      } else {
        this.title = "编辑";
        this.form = value;
        this.fileUrl=value.fileList[0].fileUrl;
        this.fileName=value.fileList[0].fileName
      }
    },
    addemergencyPlan() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
            console.log(132,this.form)
          if (this.title === "新增") {
            emergencyPlanAdd(this.form).then((res) => {
              if (res.data.code === "200") {

 src/views/contingencyplan/uploadFile.vue

对比新文件
@@ -0,0 +1,131 @@
<template>
  <div style="display: flex">
      <el-input :disabled="true" type="text" size="medium" v-model="viewName" style="width: 60%" ></el-input>
      <el-upload
          v-if="!disabled"
          action=""
          multiple
          :limit="1"
          :file-list="fileList"
          :http-request="uploadSectionFile"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
      >
          <div style="">
              <el-button v-if="!fileName" type="primary" size="small" style="margin-left:25px;;width:65px;height:36px;display: flex;align-items: center;justify-content: center">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </div>
      </el-upload>

      <div style="display: flex">
          <a  v-if="!disabled&&fileName">
              <el-button @click="downLoadFile(downloadUrl)"  slot="tip" type="primary" size="small" style="margin-left:25px;width:65px;height:36px;display: flex;align-items: center;justify-content: center">
                  下载<i class="el-icon-download el-icon--right"></i>
              </el-button>
          </a>
          <el-button v-if="!disabled&&fileName" slot="tip" type="primary" size="small  " @click="handleClear" style="margin-left:5px;width:65px;height:36px;display: flex;align-items: center;justify-content: center"
          >清除<i class="el-icon-delete el-icon--right"></i></el-button>
      </div>
  </div>
</template>

<script>

    import {emergencyPlanUpload} from "@/api/emergencyplan.js";

export default {
    props: {
        name: {
            type: String
        },
        url: {
            type: String
        },
        disabled: {
            type: Boolean
        }
    },
  data() {
    return {
        action: '',
        viewName:'',
        fileName: '',
        filePath: '',
        downloadUrl: '',
        fileList: [],
    }
  },
    mounted() {
        setTimeout(() => {
            this.fileName = this.$props.name;
            this.downloadUrl = this.$props.url;
            this.viewName=this.$props.name
        }, 100);
    },
    watch: {
        name() {
            this.fileName = this.$props.name;
            this.downloadUrl = this.$props.url;
            this.viewName=this.$props.name;
        }
    },
  methods: {

      downLoadFile(fileUrl){
          console.log(123,fileUrl)
          let a = document.createElement('a')
          // a.href = this.defaultUrl+`/upload/downloadNew?path=`+encodeURI(fileUrl)
          a.href = process.env.BASE_API + '/upload/'+fileUrl
          a.click();
      },

      downloadFile(){

      },
      uploadSectionFile(param) {
          let form = new FormData();
          form.append('file', param.file);
          emergencyPlanUpload(form).then(res=>{
              if (res.data.code==200){
                  this.fileName = res.data.result.fileName;
                  this.viewName=res.data.result.fileName;
                  this.downloadUrl=res.data.result.fileUrl
                  this.$nextTick(() => {
                      this.$emit('uploadFileSuccess', {
                          fileName: this.fileName,
                          fileUrl: this.downloadUrl
                      });
                  });
                  this.$message({
                      type:'success',
                      message:'上传成功',
                      duration:2000,
                  })
              }else {
                  this.$message.error('上传失败，系统未知错误！错误码为【500】');
              }
          })
      },

      handleClear(){
          this.fileName = '';
          this.fileList = [];
          this.viewName=""
          this.$emit('uploadFileSuccess', {
              fileUrl: '',
              fileName: ''
          });
      },

      beforeUpload(file) {
      },
      handleError(err, file, fileList) {
          this.$message.error('上传失败，系统未知错误！错误码为【500】');
      },
      handleSuccess(err, file, fileList) {
      },
  }
}
</script>


 src/views/contingencyplan/uploadImg.vue

对比新文件
@@ -0,0 +1,123 @@
<template>
  <div >
      <el-upload
          action=""
          :disabled="disabled"
          list-type="picture-card"
          :file-list="fileList"
          :http-request="handleUpload"
          :beforeUpload="beforeUploadImg"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
      >
          <i  class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" :modal="false">
          <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </div>
</template>


<script>

    import {emergencyPlanUpload} from "@/api/emergencyplan.js";

    export default {
        props: {
            disabled: {//是否可用
                type: Boolean,
                default:false
            },
            imgList: {//存储路径
                type: Array,
                default:[]
            },
        },
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,

                fileList:[],
                fileUrl:"",
                fileName:"",

            };
        },
        watch:{},
        created:function () {},
        mounted(){

            if (this.imgList!=null){
                for(let i = 0 ;i < this.imgList.length ; i++){
                    this.imgList[i].url = process.env.IMG_API + 'emergencyPlan/'+this.imgList[i].fileName
                    this.fileList.push(this.imgList[i])
                }
            }
        },
        methods: {
            handleRemove(file, fileList) {
                for (let a = 0;a<this.fileList.length;a++){
                    if(file.uid == this.fileList[a].uid){
                        this.fileList.splice(a,1);
                    }
                }
                this.$nextTick(() => {
                    this.$emit('removeImgSuccess', {
                        fileList:this.fileList
                    });
                });
            },
            handlePreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeUploadImg(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
                }
                return (isJPG || isPNG) ;
            },
            handleError(err, file, fileList){
                this.$message.error('上传失败，系统未知错误！错误码为【500】');
            },
            handleUpload(param){
                let formData = new FormData();
                formData.append('file', param.file); //添加键值
                emergencyPlanUpload(formData).then(res=>{
                    if (res.data.code==200){
                        this.fileUrl = res.data.result.fileUrl
                        this.fileName = res.data.result.fileName
                        this.fileList.push(
                            {
                                fileUrl: res.data.result.fileUrl,
                                fileName:res.data.result.fileName,
                                url:process.env.IMG_API + 'emergencyPlan/'+res.data.result.fileName
                            }
                        )
                        this.$nextTick(() => {
                            this.$emit('uploadImgSuccess', {
                                fileName: this.fileName,
                                fileUrl: this.fileUrl
                            });
                        });
                        this.$message({
                            type:'success',
                            message:'上传成功',
                            duration:2000,
                        })
                    } else{
                        this.$message.error('上传失败，系统未知错误！');
                    }
                })
            },
            handleSuccess(response, file, fileList) {
            },
        }
    }
</script>