二十二、Vue文件手动上传（普通存储、base64存储）

文件上传到后端

axios二次封装使用

//头像上传
export function avatarUpload (userFrom) {
  return requests({
    url: '/test/72b88c04309911ec8d3d0242ac130003/v1_0_0/testprovider/avatar_square/upload',
    method: 'post',
    data: userFrom,
  })
}

<template>
  <div id="imageUpload">
    <div class="dialog">
      <el-dialog :title="imageName" :visible.sync="dialogFormVisible">
        <div class="addInfor">
          <el-button type="primary" @click="uploadfile2()">点击上传</el-button>
          <input
            type="file"
            @change="filevaluechange2()"
            ref="uploadfile2"
            enctype="multipart/form-data"
            style="display: none"
            accept="image/jpeg,image/png,image/gif"
          />

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureButton">确 定</el-button>
            <el-button @click="cancelButton">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { avatarUpload } from "../api/index";
import axios from "axios";
export default {
  name: "imageUpload",
  data() {
    return {
      imageName: "修改头像",
      dialogFormVisible: true,
      id: "278",
    };
  },
  methods: {
    sureButton() {},
    cancelButton() {},
    /* 导入数据功能 */
    uploadfile2() {
      // 当点击button按钮后会触发此事件
      // 作用就是打开文件上传弹框
      this.$refs.uploadfile2.click();
    },
    filevaluechange2() {
      // 选中文件后，会触发input的change事件，即会进入此函数
      var formdata = new FormData();
      // this.$refs.uploadfile2是vue中获取dom元素的方法
      // 通过files就可以拿到所有上传的文件，如果是多个文件循环即可
      formdata.append("avatar_square", this.$refs.uploadfile2.files[0]);
      // 必须设置请求类型
      formdata.append("type", "head");
      // 如果需要传id的情况下，参考下面代码
      formdata.append("id", this.id);
      // 配置完成后，只需要向后台传入formdata 变量即可
      console.log(formdata.get("id"));

      avatarUpload(formdata).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
.dialog >>> .el-dialog {
  width: 30%;
}
@media screen and (min-width: 0px) and (max-width: 1030px) {
  .dialog >>> .el-dialog {
    width: 370px;
  }
}
</style>

aioxs使用

 axios({
        method: "post",
        url: "/test/72b88c04309911ec8d3d0242ac1300031_0_0/testprovider/avatar_square/upload",
        headers: {
          "Content-Type": "application/json",
          Authorization:
            "Basic " + btoa("testeradmin" + ":" + "testerpassword"),
        },
        data: formdata,
      }).then((result) => {
        console.log(result);
      });

 

转化base64存储到数据库

html代码

  <!-- 是否显示上传列表show-file-lis -->
            <el-upload
              list-type="picture"
              action=""
              :show-file-list="false"
              accept=".jpg, .png"
              :auto-upload="false"
              :on-change="getFile"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleUploadRemove"
            >
              <el-button size="small" type="primary" @click="uploadimg"
                >选择图片上传</el-button
              >
            </el-upload>

js的使用

//base64头像上传
    getFile(file, fileList) {
      this.getBase64(file.raw).then((res) => {
        console.log(res); //输出base64位字符串数据
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    handleUploadRemove(file, fileList) {
      this.proofImage = "";
      this.ruleForm.message_img = "";
    },
    handlePictureCardPreview(file) {
      console.log(this.proofImage);
    },
    uploadimg() {},