• 获取文件名和后缀名, 并且修改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>
  • 相关阅读:
    飞入飞出效果
    【JSOI 2008】星球大战 Starwar
    POJ 1094 Sorting It All Out
    POJ 2728 Desert King
    【ZJOI 2008】树的统计 Count
    【SCOI 2009】生日快乐
    POJ 3580 SuperMemo
    POJ 1639 Picnic Planning
    POJ 2976 Dropping Tests
    SPOJ QTREE
  • 原文地址:https://www.cnblogs.com/0520euv/p/12419800.html
Copyright © 2020-2023  润新知