Vue+Element+.NET Core图片上传+级联选择器+Table表格树形数据与懒加载功能实现

Cascader 级联选择器动态加载

这里我们要实现的是一个商品类别的动态加载，根据功能需求，类别分为三级。

1. template代码

<el-form-item label="商品分类:">
          <el-cascader
            ref="cascader"
            :props="selectProps"
            v-model="productCate.pid"
            clearable
            filterable
          ></el-cascader>
</el-form-item>

2. data代码

 selectProps: {
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          let pid;
          if (node.level == 0) {
            //加载一级数据
            pid = 0;
          } else {
            pid = node.value;
          }
          //将pid传到后台进行查询
          getChildrenByPid(pid).then(res => {
            const nodes = res.data.map(v => {
              return {
                value: v.id,
                label: v.name,
                leaf: level >= 2 
              };
            });
            resolve(nodes);
          });
        }
      }

3. 效果图

Table表格 树形数据与懒加载

1. template代码
   基本商品类别的table展示

<div class="table-container">
      <el-table
        :data="pageList"
        row-key="id"
        :lazy="true"//lazy属性为true加载函数load
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        class="table"
        ref="table"
        v-loading="listLoading"
      >
        <el-table-column label="分类名称" prop="name" align="center"></el-table-column>
        <el-table-column label="分类图片" prop="localServicePath" align="center">
          <template slot-scope="scope">
            <img :src="'http://localhost:8100/'+scope.row.localServicePath" width="60" >
            //动态加载本地图片
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="ordernum" align="center"></el-table-column>
        <!-- <el-table-column label="创建人" prop="createdby" align="center"></el-table-column>
        <el-table-column label="修改人" prop="updatedby" align="center"></el-table-column>-->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

2. methods中代码

load(tree, treeNode, resolve) {
      FindByPid(tree.id).then(res => { //tree中含有
        const nodes=res.data.map(v=>{
        return {...v,hasChildren:v.level<=2}//因为总分类有三级，所以子分类分到二级
        })
        resolve(nodes);
      });
    },
findByPid() { //查询一级分类数据，一级分类数据默认pid为0
      FindByPid(0).then(res => {
        this.listLoading = false; 
        this.pageList = res.data.map(v=>{
        return {...v,hasChildren:true}//默认一级分类数据都加上 hasChildren:true 的属性
        });
      });
    }

3. mounted中

this.findByPid()//调用方法

4. 效果图
   

图片上传

1. 前端：
   组件singleUpload

<template> 
  <div>
      <el-upload
            class="upload-demo"
            action="http://localhost:8100/api/img/imgUpload/single"
            :file-list="fileList"
            :data="uploadData"
            :on-success="handleSuccess"
            name="Imgs"
            :limit="1"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
          </el-upload>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="">
    </el-dialog> -->
  </div>
</template>
<script>
  export default {
    name: 'singleUpload',
    data() {
      return {
       uploadData: { ImgType: "goodstype" },
       fileList: [],
      };
    },
    methods: {
    handleSuccess(res){
      this.$emit('uploadSuccess',res)
    }
  }
  }
</script>
<style>
</style>

2. 后台接口

using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Shop.Api.Base.Service;
using Shop.Api.Common;
using Shop.Images.VO;
using Constants = Shop.Api.Common.Constants;
namespace Shop.Images.Controllers
{
    [Route("api/img/imgUpload")]
    [ApiController]
    public class ImgUploadController : ApiServiceBase
    {
        [HttpPost]
        [Route("single")]
        public async Task<ResponseBase<ImgSingleOutVO>> UPSingleImg([FromServices]IHostingEnvironment env,[FromForm]ImgVO option)
        {   
            //1 判断是否有文件上传
            if(option.Imgs.Count==0)
            {
                return SetResultError<ImgSingleOutVO>("对不起，未找到图片资源");
            }
            var file = option.Imgs[0];
            //2 获取文件流转换成字节数组
            var imgBytes=TypeConverter.ConvertFromStreamToBytes(file.OpenReadStream());
            //2 判断文件上传类型，只能上传图片类型
            var isAllowed=FileHelper.IsAllowedImgExtension(TypeConverter.ConvertFromBytesToStream(imgBytes));
            if(!isAllowed)
            {
                return SetResultError<ImgSingleOutVO>("对不起，只能上传图片格式的文件");
            }
            //3 上传到本地服务器
            var localPath=string.Join(Path.DirectorySeparatorChar, Constants.QINIU_BUCKET_PATH[option.ImgType].LocalPath);
            var fileFolder = Path.Combine(env.WebRootPath, localPath);
            //获取后缀名
            var extension = Path.GetExtension(file.FileName);
            var random = new Random();
            var fileName = DateTime.Now.ToString("yyyyMMddHHmmssfffff") + random.Next(10000, 99999) + extension;
            using (var stream = new FileStream(Path.Combine(fileFolder, fileName), FileMode.CreateNew))
            {
                file.CopyTo(stream);
            }
            //2上传到七牛云
            var key = Constants.QINIU_BUCKET_PATH[option.ImgType].QiniuKeyPrefix + fileName;
            try
            {
                await QiniuHelper.Upload(Constants.QINIU_BUCKET, key, imgBytes);
            }
            catch (Exception)
            {
                return SetResultError<ImgSingleOutVO>("对不起，上传oss时出现问题");
            }
            var localServicePath = string.Join('/', Constants.QINIU_BUCKET_PATH[option.ImgType].LocalPath) + "/" + fileName;
            ImgSingleOutVO imgSingleOutVO = new ImgSingleOutVO() { QiniuKey = key, LocalServicePath = localServicePath };
            return SetResultSuccess<ImgSingleOutVO>(imgSingleOutVO);
        }
    }
}

3. 效果图
   右上角打绿√即表示上传成功
   

---

欢迎访问我的个人博客: www.linjiaxiaozhang.com