javascript - 为什么在提交帖子请求时我的图片会转换为字符串？

Question

看截图 .为什么图像会损坏？我正在尝试使用 axois post 上传图像，但 axois post 无法正确处理我的图像。我的代码分为两部分。第一部分我编写上传多图像的逻辑，第二部分我在我的页面组件中使用它。

第一部分
此代码用于上传多张图片

export const MultiImageUpload = ({Setimage}) => {
  const [selectedImages, setSelectedImages] = useState([]);

  const onSelectFile = (event) => {
    const selectedFiles = event.target.files;
    const selectedFilesArray = Array.from(selectedFiles);
    
    const imagesArray = selectedFilesArray.map((file) => {
      return URL.createObjectURL(file);
    });
     
    setSelectedImages((previousImages) => previousImages.concat(imagesArray));
    Setimage((previousImages) => previousImages.concat(imagesArray));
    
    // FOR BUG IN CHROME
    event.target.value = "";
  };

  function deleteHandler(image) {
    setSelectedImages(selectedImages.filter((e) => e !== image));
    Setimage(selectedImages.filter((e) => e !== image));
    URL.revokeObjectURL(image);
  }

第二部分现在我在我的页面中导入这个组件

const AdsPost = ({data}) => {
const[image,Setimage] = useState([])
var data = new FormData();
image.forEach(file=>{
      data.append("files", file)
      console.log("image_url:",file)
    })
let submit_ads = axios.post(url,data,{headers:headers}).then((res)=>{
      console.log(res)
    })

这里是 myjsx

<MultiImageUpload
 Setimage={Setimage}/>

我可以使用postman上传图片，但不知道为什么axois post不能上传图片。

Answer 1

这是你的问题:

image.forEach(file=>{
  data.append("files", file)
  console.log("image_url:",file)
})

参数file不是一个文件，但是它是

的结果

const imagesArray = selectedFilesArray.map((file) => {
  return URL.createObjectURL(file);   // <--- this line
});

换句话说，你本质上是在做

data.append("files", URL.createObjectURL(file));

修复该问题，您的代码应该可以正常工作。

---

解决方案

Here是一个带有建议解决方案的沙箱，其想法是将文件的状态委托(delegate)给提供者，并根据需要在子组件中使用上下文。

./context/files.js

import { createContext } from "react";

export default createContext({
  /** @return {{ file:File, dataUrl:string }[]]} */
  get files() {
    return [];
  },

  /** @return {Error[]} */
  get errors() {
    return [];
  },

  /** @param {File[]} files */
  addFiles(files) {},
  /** @param {File} file */
  removeFile(file) {},

  /** @param {Error[]} errors */
  setErrors(errors) {}
});

./providers/FilesProvider.jsx

import { useContext, useMemo, useState } from "react";
import FilesContext from "../context/files";

const FilesProvider = ({ children }) => {
  const [internal, setInternal] = useState(() => ({
    files: [],
    errors: []
  }));

  const contextValue = useMemo(
    () => ({
      get files() {
        return internal.files;
      },

      get errors() {
        return internal.errors;
      },

      addFiles(filesAdded) {
        setInternal(({ files, errors }) => ({
          files: files.concat(
            filesAdded.map((file) => ({
              file,
              dataUrl: URL.createObjectURL(file)
            }))
          ),
          errors
        }));
      },
      removeFile(fileRemoved) {
        URL.revokeObjectURL(fileRemoved);
        setInternal(({ files, errors }) => ({
          files: files.filter(({ file }) => file !== fileRemoved),
          errors
        }));
      },

      setErrors(errors) {
        setInternal(({ files }) => ({ files, errors }));
      }
    }),
    [internal]
  );

  return (
    <FilesContext.Provider value={contextValue}>
      {children}
    </FilesContext.Provider>
  );
};

const useFiles = () => useContext(FilesContext);

export default FilesProvider;
export { useFiles };

用法

<FilesProvider>
   <FilesSelectComponent />
</FilesProvider>

和

const { files, errors, addFiles, removeFile, setErrors } = useFiles();