普歌-智音团队 vue实现图片上传_选择分屏方式上传图片 vue-CSDN博客

本文链接：https://blog.csdn.net/weixin_45498167/article/details/108430060

项目开发中我们会遇到图片上传的需求，那么下面就讲解一下vue如何实现上传图片功能

项目需求使用Element-ui的上传组件

2.我们还需要云存储（oss）：

会把我们本地图片上传到云服务器，把图片地址返回给前端，之后前端就可以把数据提交给后端

代码示例

<!-- 添加对话框 -->
    <el-dialog title="提示" :visible.sync="adddialogVisible" width="70%" @close="addDislogClosed">
      <!-- 图片标题 -->
      <el-form ref="addFormRef" :rules="rules" :model="pugebanner" label-width="80px">
        <el-form-item label="图片标题" prop="name">
          <el-input v-model=" pugebanner.name"></el-input>
        </el-form-item>
        <!-- 上传轮播图 -->
        <el-form-item label="图片上传" prop="bannerUrl">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess" //s上传成功后的钩子
            :before-upload="beforeAvatarUpload"
            action="" //这里就是你的oss服务器地址
            class="avatar-uploader"
            ref="my-upload"
          >
            <el-button>点击上传</el-button>
          </el-upload>
          <img :src="pugebanner.bannerUrl" height="200" />//这里用于图片回显
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确 定</el-button>
      </span>
    </el-dialog>

下面是方法部分

export default {
  data() {
    return {
      tableData: [],
      //   添加对话框
      adddialogVisible: false,
      //   添加轮播图表单验证
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
      pugebanner: {
        bannerUrl:"",
        name: "",
      },
    };
  },
 
  methods: {
    // 添加对话框重置操作
    addDislogClosed() {
      this.$refs.addFormRef.resetFields();
      // 上传组件的重置
      this.$refs["my-upload"].clearFiles();
    },

    // 上传成功后
    handleAvatarSuccess(response) {
      // 把返回的图片路径给到回显部分
      this.pugebanner.bannerUrl = response.data.url;
    },
    // 上传成功前，判断图片大小
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 确定按钮
    adduser() {
    //表单验证
      this.$refs.addFormRef.validate((valid) => {
        if (!valid) return;
        //调用自己的api  这里的参数是图片标题和图片路径
        bannerApi
          .addbanner(this.pugebanner)
          .then(() => {
            this.$message.success("添加数据成功");
            this.getBanner();
          })
          .catch(() => {
            this.$message.error("添加数据失败");
          });
        this.adddialogVisible = false;
      });
    },
  },
};