• 获取文件名和后缀名, 并且修改el-upload上传文件名



    /*
    获取 文件名 */
    let IMG = "1235646SDANJFA45645665.jpg";
    let reg = IMG.replace(/(.*/)*([^.]+).*/ig, "$2");
    console.log(reg) //1235646SDANJFA45645665
    //替换文件名 
    let replaceFifle = reg.replace(reg, "准备替换的内容")
    console.log(replaceFifle) //准备替换的内容
    /* 
     获取 文件扩展
    */
    let IMG = "1235646SDANJFA45645665.jpg";
    let reg = IMG.split('.').pop();
    console.log(reg); //jpg

    //限制文件大小2MB以下,只能是jpg、png格式、宽高只能为1920*1820
    
    beforeUpload(param){
    const isJPG = param.type === 'image/jpeg';
    const isPNG = param.type === 'image/png';
    const isLt2M = param.size / 1024 / 1024 < 2;

    if (!isLt2M) {
    this.$message.error('上传图片大小不能超过 2MB!');
    }
    if (isPNG || isJPG) {
    //执行代码.....
    }else{
    this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
    }

    const isSize = new Promise(function(resolve, reject) {
    let width = 320;
    let height = 320;
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload = function() {
    let valid = img.width == width && img.height == height;
    valid ? resolve() : reject();
    }
    img.src = _URL.createObjectURL(file);
    }).then(() => {
    return file;
    }, () => {
    this.$message.error('上传的图片宽高必须是320*320!');
    return Promise.reject();
    });

    return isJPG && isLt2M && isPNG;
    },
    //普通文件上传
    uploadFile(param){
            this.file = param.file;
            this.key = param.file.name;
            let form = new FormData();
            form.append("file", this.file);
            form.append("key", this.key);
    },
    
    
              还有一种是input把type改成file。   
                   <input
                                type="file"
                                name
                                value
                                @change="tirggerFile($event)"
                                id="hiddenInput"
                              />      


    tirggerFile(event){ let file = event.target.files[0]; this.files = file; this.keys = file.name; let param = new FormData(); param.append("file", this.files); param.append("key", this.keys); //后面代码与upload类似,请求后端。略过。 }
     
     //修改el-upload上传文件名
     使用  beforeUpload 钩子函数,强制修改文件名
    beforeUpload (file){
         const copyFile = new File([file],  '需要修改的名称');
       this.UploadFile(copyFile)
        return false
    }
    
    UploadFile(param){
           let params = new FormData();
            params.append("file", param);
            params.append("key", "key");  
           API.uploadRpx(params).then(res=>{
        
                    //..........
           })
         
    }   

    批量上传文件,请求一次接口

    <template>
      <div>
        <el-button type="primary" size="mini" plain @click="uploadImg"
          >确认上传</el-button
        >
        <el-button type="primary" size="mini" plain @click="fileList = []"
          >取消</el-button
        >
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-error="handleUploadError"
          :on-change="handleChange"
          :limit="limits"
          :auto-upload="false"
          :multiple="true"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
    </template>

    <script>
    import { uploadPic } from '@/api/asset'
    export default {
      name: 'UploadPic',
      props: {
        limits: {
          type: Number,
          default: 5
        }
      },
      data() {
        return {
          dialogImageUrl: '',
          dialogVisible: false,
          fileList: [] // fileList数组
        }
      },
      methods: {
        handleRemove(file, fileList) {
          const picList = []
          for (let i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].uid !== file.uid) {
              picList.push(this.fileList[i])
            }
          }
          this.fileList = picList
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        },
        // 上传失败
        handleUploadError() {
          this.$message({
            type: 'error',
            message: '上传失败'
          })
          this.loading.close()
        },
        handleChange(params) {
          const isLt2M = params.size / 1024 / 1024 < 2
          const isPNG = params.raw.type === 'image/png'
          const isJPEG = params.raw.type === 'image/jpeg'
          const isJPG = params.raw.type === 'image/jpg'
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
            return
          }
          if (isPNG || isJPEG || isJPG) {
            this.fileList.push(params)
            return false
          } else {
            this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
            return
          }
        },
        uploadImg() {
          if (this.fileList.length === 0) {
            this.$notify({
              title: '警告',
              type: 'warning',
              duration: 2000,
              message: '请选择图片进行上传'
            })
            return
          }
          this.loadingImg()
          const formData = new FormData()
          this.fileList.forEach(item => {
            formData.append('file', item.raw)
            console.log(item.raw)
          })
          // this.loading.close()
          // uploadPic(formData).then(res => {
          //   if (res.code === 200) {
          //     this.fileList = []
          //     this.$message.success({
          //       message: '上传成功',
          //       duration: 2000
          //     })
          //   }
          // })
          //   // eslint-disable-next-line handle-callback-err
          //   .catch(error => {
          //     this.$message.error('上传失败,请重新上传')
          //     this.loading.close()
          //   })
        },
        loadingImg() {
          this.loading = this.$loading({
            lock: true,
            text: '上传中...',
            background: 'rgba(0,0,0,0.7)'
          })
        }
      }
    }
    </script>

    <style lang="scss" scoped>
    // /* 推荐,实现简单 */
    // /deep/.el-upload-list__item.is-ready {
    //   display: none;
    // }
    </style>
  • 相关阅读:
    汉字词组换行
    C#中获取Excel文件的第一个表名
    SQL查找某一条记录的方法
    C#数据库连接字符大全
    整理的asp.net资料!(不得不收藏)
    母版页的优点,及母版页与内容页中相互访问方法
    13范式
    使用 Jackson 树连接线形状
    word2007,取消显示回车符
    三张表之间相互的多对多关系
  • 原文地址:https://www.cnblogs.com/0520euv/p/12419800.html
Copyright © 2020-2023  润新知