碎笔记随记

1、form表单规则验证： 

1：在el-form中加一句 :rules="rules"

     

2：在需要加规则的el-form-item中加一句  prop="xxx" (xxx和v-model值一致)

3：在date->return里面定义规则，主要是找合适的正则验证表达式

（1）rule

表示当前的验证规则对象,包含名称,触发条件等信息,可以通过它获取到这条规则的配置。

（2）value

表示当前校验的值,就是输入框中的输入的值。根据这个值来进行自定义验证。

（3）callback

这是一个回调函数,用于告诉验证组件验证的结果:

• callback() 表示验证通过
• callback(new Error('错误信息')) 表示验证失败,并设置错误提示语。

2、el-upload文件/图片上传阿里云：

 <div class="news_image">封面图片：
        <el-upload
           action="#"
           list-type="picture-card"
           :auto-upload="true"
           :limit="1"
           :file-list="fileList"
           :http-request="(options) =>
                   handleHttpRequest(options)"
           :on-remove="(options) =>
                   handleRemove(options)">

            <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </div>

 import {aliClientInit,ossFilePath} from '@/api/common';

  data() {
      return {
        AliClient: {}
             }
          }

  methods: {
      //初始化阿里云
      async aliOssInit(data) {
        this.AliClient = await aliClientInit();
      },
}

 //封面图片上传
      async handleHttpRequest(option){
        //上传前先置空,否则 el-upload 组件上传图片闪烁
        this.fileList = [];

        let vm = this;
        vm.disabled = true;
        const client = this.AliClient, file = option.file;
        console.log('ali=================client',client);

        // 随机命名
        const random_name = ossFilePath(file.name);
        await client.put(random_name, file)
        .then((res) => {
          console.log('ali===res=======',res);

          // 上传的图片后  图片名称及返回的url 保存
          if(this.fileList.length == 0){
            vm.fileList.push({url: res.url, name: random_name})
            return res.url
          }

          this.fileList[0].name = random_name;
          this.fileList[0].url = res.url;

          return res.url
        }).catch(error => {
          vm.disabled = false;
          option.onError('上传失败');
        });
      },

（1）ossFilePath函数是用于生成上传到OSS的随机文件名的

它的主要逻辑是:

1. 从原文件名中提取文件扩展名,如.png、.jpg等。
2. 生成一个随机字符串作为文件名。
3. 将随机字符串和扩展名拼接成完整的文件名。

这样可以确保上传的每个文件拥有一个唯一的随机文件名,避免重名导致文件被覆盖的问题。

（2）option 参数代表的是文件上传组件传入的文件对象信息,它通常包含以下几个属性:

• file: 上传的文件对象,包含文件名、大小、类型等信息
• onProgress: 上传进度回调函数
• onSuccess: 上传成功回调函数
• onError: 上传失败回调函数
• onFinish: 上传完成回调函数

（3）如何解决上传后下面同步还有文件信息

 <el-upload
                class="upload-appendix"
                action="http://47.241.238.119:8080/gpt_index/upload"
                :file-list="appendixList"
                :http-request="(options) =>
                        handleHttpRequest2(options)"
               >
             <el-button size="small" type="primary">上传回答附件</el-button>
           </el-upload>
 

给类加一个样式 

 .upload-appendix .el-upload-list {
     display: none;
  }