چطور یک فایل (مثلا یک عکس ) را از کاربر گرفته و آپلود کنیم؟
- نفیسه افقی 3 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
از کامپوننت FileUpload در کتابخانه primereact
استفاده کنید. ابتدا آن را ایمپورت کنید:
import { FileUpload } from "primereact/fileupload";
تگ FileUpload
را داخل فرم خود قرار دهید:
<FileUpload
id="product_pic"
name="pic"
onChange={formik.handleChange}
value={formik.values.pic}
accept="image/jpeg"
customUpload={true}
uploadHandler={pictureUploadHandler}
mode="advanced"
chooseLabel="تصویر محصول"
auto="true"
/>
accept="image/jpeg"
مشخص می کند که این آپلودر فقط عکسهایی با فرمت jpeg را قبول می کند. شما می توانید هر فرمتی خواستید را اینجا قرار دهید.uploadHandler={pictureUploadHandler}
مشخص می کند که هنگام آپلود عکس توسط کاربر تابعpictureUploadHandler
فراخوانی شود.
تابع pictureUploadHandler
و متغیر حالت picFile
را بصورت زیر تعریف کنید:
const [picFile, setpicFile] = useState(null);
const pictureUploadHandler = async ({ files }) => {
const file = files[0];
setpicFile(file);
};
با اینکار ، فایل آپلودی کاربر را داخل picFile
ذخیره می کنیم و وقتی کاربر دکمه سابمیت را کلیک کرد آن را به همراه سایر اطلاعات فرم با POST ریکواست به back-end ارسال می کنیم.
داخل تابع onSubmit
، کد زیر را قرار دهید:
.
.
.
//uploading pic
let formData = new FormData();
formData.append("file", picFile);
const c = {
headers: {
"Contetnt-Type":"multipart/form-data"
}
}
axios.post('http://localhost:3003/products/uploadPic', formData,c).then(res => {
//Now do what you want with the response;
})
.
.
.
- حالا فایل ما به آدرس
http://localhost:3003/products/uploadPic
ارسال می شود. برای ذخیره فایل روی سرور در قسمت back-end می توانید از این پست استفاده کنید.
- نفیسه افقی 3 سال قبل پاسخ داد
- آخرین ویرایش 3 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید