如何在react中上传图像

Question

我正在开发一个电子商务应用程序，在那里我使用表单在应用程序中添加新产品。为此，我从用户那里获取多个输入，然后将这些输入存储在我的redux存储中，最后我在我的应用程序中显示新添加的产品，一切都很顺利。早些时候我使用<input type="url"/>，这样用户就可以粘贴一个图像url，这样我就可以显示它了工作正常，但现在我想允许用户从本地系统上传图像，而不是使用<input type="file"/>上传url，但这不起作用，这不是从本地系统加载图像，所以我有任何方法可以从本地系统上载图像吗：

表单

import "./ProductForm.css";
import { useReducer } from "react";
import { useDispatch } from "react-redux";
import { addProductHandler } from "../../store/DataStore";
import { useNavigate } from "react-router-dom";
const ProductForm = () => {
const Dispatch = useDispatch();
const navigate = useNavigate();
const initialState = {
product_id: "",
product_name: "",
product_quantity: "",
product_description: "",
product_type: "",
product_valid: "false",
product_price: "",
product_title: "",
product_image: "",
};
const reducer = (state, action) => {
if (action.type === "id") {
return { ...state, product_id: action.value };
} else if (action.type === "name") {
return { ...state, product_name: action.value };
} else if (action.type === "title") {
return { ...state, product_title: action.value };
} else if (action.type === "price") {
return { ...state, product_price: action.value };
} else if (action.type === "image") {
return { ...state, product_image: action.value };
} else if (action.type === "description") {
return { ...state, product_discription: action.value };
} else if (action.type === "type") {
return { ...state, product_type: action.value };
}
};
const [state, dispatch] = useReducer(reducer, initialState);
const submitHandler = (e) => {
e.preventDefault();
const obj = {
product_id: state.product_id,
product_name: state.product_name,
product_price: +state.product_price,
product_title: state.product_title,
product_image: state.product_image,
product_type: state.product_type,
product_description: state.product_discription,
product_quantity: 0,
product_valid: "false",
};
console.log(obj);
// Dispatch(addProductHandler(obj));
// navigate(`/product`, { replace: true });
};
return (
<form onSubmit={submitHandler}>
<legend>
<center>
<h2>
<b>Add Product</b>
</h2>
</center>
</legend>
<div className="form-group">
<label>Product id</label>
<input
type="text"
className="form-control"
value={state.product_id}
onChange={(e) => dispatch({ type: "id", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Name</label>
<input
type="text"
className="form-control"
value={state.product_name}
onChange={(e) => dispatch({ type: "name", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Price</label>
<input
type="text"
className="form-control"
value={state.product_price}
onChange={(e) => dispatch({ type: "price", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Title</label>
<input
type="text"
className="form-control"
value={state.product_title}
onChange={(e) => dispatch({ type: "title", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Type</label>
<select
className="form-control"
value={state.product_type}
onChange={(e) => dispatch({ type: "type", value: e.target.value })}
>
<option value="" selected disabled>
Select one
</option>
<option value="c1">Commodityies</option>
<option value="g1">Gadgets</option>
<option value="w1">Wearings</option>
</select>
</div>
<div className="form-group">
<label>Product Image</label>
<input
type="file"
className="form-control"
value={state.product_image}
onChange={(e) => dispatch({ type: "image", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Description</label>
<textarea
className="form-control"
id=""
rows="7"
value={state.product_discription}
onChange={(e) =>
dispatch({ type: "description", value: e.target.value })
}
></textarea>
</div>
<button type="submit" className="btn btn-primary mt-4">
Submit
</button>
</form>
);
};
export default ProductForm;

Answer 1

您不能像这样上传文件，您必须使用FormData class For multipart/form-data

var formData = new FormData();

formData.append('product_id', state.product_id,)
formData.append('product_name', state.product_name,)
formData.append('product_price', +state.product_price,)
formData.append('product_title', state.product_title,)
formData.append('product_image', state.product_image,)
formData.append('product_type', state.product_type,)
formData.append('product_description', state.product_discription,)
formData.append('product_quantity', 0,)
formData.append('product_valid', "false") 
formData.append('image', $('input[type=file]')[0].files[0]); 

$.ajax({
url: 'Your url here',
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// ... Other options like success and etc
});

之后，它将发送ajax请求，就像您提交常规表单一样enctype＝"；多部分/形式数据"；