提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

vue-element-admin上传图片的功能，并且传url的值

地址
2023-03-15 23:26:55 时间
写在前面的而一些啰嗦的话:

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

Star指数：69.7k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard 官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/

使用建议 本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

推荐使用，简化版

使用一下饿了么简化版后台管理系统-eladmin-web Github地址：https://github.com/elunez/eladmin-web

测试使用demo
<template>
  <div class="app-container">
        <el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px">
          <el-form-item label="插入图片">
            <el-upload
              class="avatar-uploader"
              :action="fileUpload"
          
              :headers="{ Authorization: token }"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
         
              <img
                v-if="nextProjectForm.publicWelfareUrl"
                :src="nextProjectForm.publicWelfareUrl"
                class="avatar"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>           
        </el-form>

        <el-button type="primary" @click="createData()">确定</el-button>

  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      nextProjectForm: {
        publicWelfareUrl: "",
      },
    };
  },
  computed: {
    ...mapGetters(["fileUpload", "token"])
  },
  methods: {
   
    handleAvatarSuccess(response, file, fileList) {
      if (response && response.data && response.data.url) {
        this.$set(this.nextProjectForm, "publicWelfareUrl", response.data);
      }

      this.nextProjectForm.publicWelfareUrl=response.data
    },


     //添加
    async createData() {
      const params = this.nextProjectForm;
      alert(JSON.stringify(params));
    },

   
  }
};
</script>
<style lang='scss'>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

相关文章