EN

Search
Close this search box.

موستانگ، وحشیِ دوست داشتنی

پاسخ داده شد
0
0

چطور یک فایل (مثلا یک عکس ) را از کاربر گرفته و آپلود کنیم؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

از کامپوننت 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 می توانید از این پست استفاده کنید.
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت