❤ React体系27 -文章部分（二）

这一章节部分主要是对于文章类型部分进行的增加完善，最后的目的是实现各种文章类型或者各种文件类型的上传下载

1、增加文章查询部分

import { getDictDataList } from '@/api/system/dictData';    //字典数据接口


//查询文章类型 
getDictData('nexus_articletype');


// 文章类型
const getDictData= async(row) => {
    // nexus_articletype文章部分
    let res:any=await getDictDataList({dict_type:row});
    // console.log("res.data",res);
    if(res.code==200){
      setArticleList(res.data);
    }
};
  

2、增加下拉文章类型

之前我们的文章部分只是单独为文章做了增删改查，但是对于文章的所属类型却没有做出相应的限制，接下来我们针对

文章在新增的时候往下拉的表格之中写一个文章类型，并且这个类型还是必须的

向文章的Item身上增加必须的规则条件rules

<Form.Item label="文章类型" name="articletype" rules={[{ required: true, message: '请选择文章类型' }]}>
            <Select
              options={articleList}
              fieldNames={{
                label: 'dict_label',
                value: 'dict_code',
              }}
              style={{ width: '100%' }}
            />
 </Form.Item>

3、列表渲染

接下来我们渲染一下我们的文章类型

我们可以看到后台返回给我们的接口是 articletype: "105"，而我我们真正需要的是 这个所对用的类型的中文名称

正常逻辑：后台返回名称

这里我们稍微渲染一下试试，因为我们上面的文章类型下拉其实已经拿到了对应的类型的中文名称

渲染文章类型

 // 过滤文章类型方法
  const filterTypeArticle=(value)=>{
    // let res=articleList.filter(item => item.dict_code === value);
    let res=articleList.map((item:any)=>{
      if(item.dict_code==value){
        return item.dict_label
      }
    });
    return res;
}


// 应用一下这个方法
{filterTypeArticle(row.articletype)}
   
   
//没有数据的时候怎么办，做一下空数据的填充
{filterTypeArticle(row.articletype)||'--'}

4、文章缩略图上传（图片上传）

接下来我们完善一下我们的文章缩略图部分

//引入
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; 
import { Flex, message, Upload } from 'antd';

//加载以及上传点击事件
 const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </button>
  );
  
  //上传事件以及上传前的操作
  const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

然后我们搭建一下结构

  <Flex gap="middle" wrap>
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: '100%',
            }}
          />
        ) : (
          uploadButton
        )}
      </Upload>
      <Upload
        name="avatar"
        listType="picture-circle"
        className="avatar-uploader"
        showUploadList={false}
        action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: '100%',
            }}
          />
        ) : (
          uploadButton
        )}
      </Upload>
    </Flex>

自定义自己的上传图片

这里先来看一下我们图片上传相关接口，这里上传我们接口是post，地址/api/upload/image ，采用的上传image参数的方式

这边我们可以看到antd给我们默认的是avatar的参数，那么就需要我们自己自定义一下

这里我们就需要用到antd的自定义方法customRequest

customRequest	通过覆盖默认的上传行为，可以自定义自己的上传实现

我们先拿fetch使用一下customRequest

 const customRequest = (options) => {
    const formData = new FormData();
    formData.append('image', options.file); // 将文件字段名改为 image

    // 使用 fetch 或其他方式调用自定义上传接口
    fetch('http://localhost:8888/api/upload/image', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(result => {
      // 处理上传结果
      options.onSuccess(result, options.file);
    })
    .catch(error => {
      // 处理上传错误
      options.onError(error);
    });
  };

这里我们直接可以看到上传图片已经成功了，这里我们可以直接访问这个地址看到参数，也就是两种存储方式

方式一

直接存储这个地址

接下来我们把fetch完善成基础路径试试

方式二

利用base64进行存储

这里我们演示一下利用base64进行存储的方式

改造一下onChange事件

onChange={handleUrlChange}

 <Upload
        onChange={handleUrlChange}
        customRequest={customRequest}
 >
    {imageUrl ? (
      <img
        src={imageUrl}
        alt="avatar"
        style={{
          width: '100%',
        }}
      />
    ) : (
      uploadButton
    )}
  </Upload>

不过很可惜，图片太大了 ，存不进去

改数据库thumburl的数据类型为LONGTEXT，以便能够存储较长的字符串。

改正以后尝试

Access to XMLHttpRequest at 'http://localhost:8888/api/articles' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决跨域以后 存储ok