使用antd_upload组件上传图片和视频

使用antd_upload组件上传图片和视频

上传方法

        <Upload
          name="avatar"
          listType="picture-card"
          fileList={brandPropaganda?.seek?.pictureList}
          action=""
          beforeUpload={(file) => pictureBeforeUpload(file)}
          onPreview={picturePreview}
          onChange={(file) => pictureHandleChange(file)}
        >
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>上传</div>
            </div>
        </Upload>
        <p>图片只支持jpg,jpeg,gif,png格式,视频只支持mp4格式</p>

上传前限制

      const pictureBeforeUpload = (file, tab) => {
        const initType = ['jepg', 'png', 'gif', 'jpg', 'mp4', 'MP4'];
        if (file.name && !initType.includes(file.name.split('.')[1])) {
          message.error('只支持jpg,jpeg,gif,png格式');
          return false;
        }
        const isJpg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'video/mp4';
        if (!isJpg) {
          message.error('上传最多9个jpg,jpeg,gif,png图片格式或者1个mp4视频格式');
          return false;
        }
        async function putObject() {
          try {
            let pictureList = [];
            // 上传到服务器
            const result = await ossConfig.put(`backstage/${file.name}`, file);
            
            //图片列表
            pictureList = brandPropaganda?.seek?.pictureList
              ? brandPropaganda.seek?.pictureList.concat()
              : pictureList.concat();
            pictureList.push({ url: result.url });
          } catch (e) {
            console.log(e);
          }
        }
        putObject();
        return false;
      };

图片预览

    // base64转换
     const getBase64 = (file) => {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = (error) => reject(error);
        });
      };
      
      // 预览
      const picturePreview = async (file) => {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        // 预览弹窗
        setPictureVisible(true);
        // 预览地址
        setPictureImage(file.url || file.preview);
        // 预览名称
        setPictureTitle(
          file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
        );
        // 预览类型
        setType(file.url.substring(file.url.lastIndexOf('.') + 1));
      };
      // html
      <Modal
        visible={pictureVisible}
        title={pictureTitle}
        footer={null}
        onCancel={() => setPictureVisible(false)}
      >
        {pictureOrVideo === 'jpg' ||
        pictureOrVideo === 'png' ||
        pictureOrVideo === 'gif' ? (
          <img alt="example" style={{ width: '100%' }} src={pictureImage} />
        ) : (
          <Player src={pictureImage}>
            <BigPlayButton position="center" />
          </Player>
        )}
      </Modal>

change事件

      const pictureHandleChange = (info, tab) => {
        if (info.file.status === 'removed') {
          // 操作本地保存的图片资源
        }
      };

antd提供的上传和预览，优先使用react-file-viewer，可以直接预览不同格式的文件